如何用SwiftUI实现类似App Store Connect的液态玻璃导航栏芯片按钮？

完全可以实现和App Store Connect一致的效果，针对你遇到的两个问题，下面是修复方案和完整代码：

问题修复说明 #

1. 芯片异常背景色

原代码直接给Text添加glassEffect会导致背景模糊效果不符合预期，改用Button组件并自定义背景样式，结合选中状态切换，能完美匹配官方芯片的视觉效果。

2. 滚动时的淡出适配

将芯片放在导航栏的Toolbar区域，而非safeAreaInset，同时配置导航栏的滚动外观，让芯片区域和导航栏同步参与滚动时的背景透明度变化，解决列表淡出但芯片不联动的问题。

完整实现代码 #

struct ContentView: View {
    @State private var selectedChipIndex = 0
    private let chipTitles = ["全部", "待处理", "已完成", "草稿", "已归档"]
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(0..<100) { index in
                    Text("内容 \(index)")
                }
            }
            .navigationTitle("Demo")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                // 保留导航栏标题
                ToolbarItem(placement: .principal) {
                    Text("Demo")
                        .font(.headline)
                }
                // 放置芯片滚动栏
                ToolbarItem(placement: .bottomBar) {
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: 8) {
                            ForEach(chipTitles.indices, id: \.self) { index in
                                Button(action: {
                                    selectedChipIndex = index
                                }) {
                                    Text(chipTitles[index])
                                        .padding(.horizontal, 16)
                                        .padding(.vertical, 8)
                                        .background(
                                            selectedChipIndex == index
                                                ? Color.accentColor
                                                : Color.systemBackground.opacity(0.7)
                                        )
                                        .foregroundColor(selectedChipIndex == index ? .white : .primary)
                                        .cornerRadius(20)
                                        .glassEffect(style: .init(blurRadius: 10, opacity: 0.2))
                                }
                            }
                        }
                        .padding(.horizontal)
                    }
                    .frame(height: 44)
                }
            }
            // 确保导航栏背景可见，触发滚动效果
            .toolbarBackground(.visible, for: .navigationBar)
            .onAppear {
                // 配置导航栏滚动时的外观
                let appearance = UINavigationBarAppearance()
                appearance.backgroundColor = .systemBackground.withAlphaComponent(0.8)
                appearance.scrollEdgeAppearance = appearance
                appearance.shadowColor = .clear
                
                UINavigationBar.appearance().standardAppearance = appearance
                UINavigationBar.appearance().scrollEdgeAppearance = appearance
            }
        }
    }
}

关键细节解释 #

• Toolbar布局：把芯片放在bottomBar位置的ToolbarItem中，让它成为导航栏的延伸部分，自然继承导航栏的滚动联动效果。
• 芯片样式：未选中状态用半透明系统背景配合低透明度的玻璃效果，选中状态用主题色，圆角设计贴近官方样式。
• 导航栏外观配置：通过UINavigationBarAppearance设置滚动时的背景透明度，移除阴影，让列表滚动时的淡出效果和芯片区域无缝衔接。

内容的提问来源于stack exchange，提问作者José