如何使列表内容通过带有材质背景的底栏显示

Posted 2023-02-24

【中文标题】如何使列表内容通过带有材质背景的底栏显示

【英文标题】：How to make List content show through a bottom bar with material background

【发布时间】：2021-10-28 15:07:28

【问题描述】：

我希望列表内容像顶部导航栏一样通过底部栏显示，从而创建模糊效果。我可以使用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)
        )
    

【问题讨论】：

可能你需要.ultraThinMaterial

@Asperi 刚刚发现.bar 完全匹配系统栏。

【参考方案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)
        

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

【讨论】：

如果可能的话，我宁愿不使用具有硬编码高度的填充或页脚，如果用户增加字体大小，它最终可能会被关闭

我没有说你必须硬编码它，我说使用相同 - 有几种方法可以做到这一点，例如。使用相同的视图或动态计算...每个都有关于 *** 的示例。

使用传递 PreferenceKeys 很难玩，但它可以工作