我想在导航栏中添加看起来像芯片的按钮，使用SwiftUI。Apple的 App Store Connect应用就有这个功能：

我尝试用以下代码来实现：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(0..<100) { index in
                    Text("Content")
                }
            }
            .navigationTitle("Demo")
            .navigationBarTitleDisplayMode(.inline)
            .safeAreaInset(edge: .top) {
                ScrollView(.horizontal) {
                    HStack {
                        ForEach(0..<5) { index in
                            Text("Text \(index)")
                                .padding()
                                .glassEffect()
                        }
                    }
                    .padding(.horizontal)
                }
            }
        }
    }
}

但效果并不如预期：

• 芯片的背景颜色有点奇怪
• 向上滚动列表时，它在导航条下方逐渐淡出，但芯片没有被计入其中

有没有办法实现与Apple的 Connect应用相同的效果？

解决方案

关于第一点：

芯片的背景颜色有点奇怪

背景是你使用 .regular 玻璃效果得到的半透明效果，这是默认设置。使用这种玻璃还会有阴影效果。

要让项更透明，可以改用 .clear 玻璃。清晰玻璃也没有阴影效果。如果你打算为这些项添加点击手势，可能也希望让玻璃具备交互性：

.glassEffect(.clear.interactive())

关于第二点：

向上滚动列表时，它在导航条下方淡出，但芯片没有被计入其中

如果你想让淡出效果从你那玻璃质感的项后面开始，只需把 .safeAreaInset 改成 .safeAreaBar。文档里有一个相关讨论：

与 safeAreaInset(edge:alignment:spacing:content:) 修饰符类似，内容视图锚定在父视图的指定水平边缘，其宽度对安全区域进行内边距。

此外，它还会扩展受内嵌安全区域影响的滚动视图的边缘效果。

.safeAreaBar(edge: .top) {
    ScrollView(.horizontal) {
        // ...
    }
}