如何使列表内容通过具有 material 背景的底栏显示

Question

我希望列表内容像顶部导航栏一样通过底部栏显示，从而产生模糊效果。我可以用 ZStack 而不是 VStack 和列表最后一个元素的一些填充来做到这一点，但是我必须知道底栏的确切高度，我想避免.

有办法吗？

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                List(1...30, id:\.self) { i in
                    Rectangle()
                        .foregroundColor(Color.random)
                        .frame(height: 36)
                }
                .listStyle(PlainListStyle())
                Text("Bottom bar")
                    .font(.title)
                    .frame(maxWidth:.infinity)
                    .padding()
                    .background(.bar)
            }
            .navigationTitle("Some Nav Title")
            .navigationBarTitleDisplayMode(.inline)
        }
        
    }
}

extension Color {
    static var random: Color {
        return Color(
            red: .random(in: 0...1),
            green: .random(in: 0...1),
            blue: .random(in: 0...1)
        )
    }
}

Answer 1

尝试使用ZStack代替VStack，比如

        ZStack(alignment: .bottom) {         // << here !!
            List(1...30, id:\.self) { i in
                Rectangle()
                    .foregroundColor(Color.random)
                    .frame(height: 36)
            }
            .listStyle(PlainListStyle())
            Text("Bottom bar")
                .font(.title)
                .frame(maxWidth:.infinity)
                .padding()
                .background(.regularMaterial)
        }

注意：您很可能需要将页脚添加到与栏高度相同的列表中，因此在滚动到底部时最后的项目将可见。

如何使列表内容通过具有 material 背景的底栏显示

How to make List content show through a bottom bar with material background

blur

swiftui

swiftui-list