VStack中的SwiftUI中心列表

67up9zun  于 12个月前  发布在  Swift
关注(0)|答案(1)|浏览(106)

我有以下代码:

var body: some View {
    
    VStack(alignment: .center, content: {
        Spacer()
        
        List {
            Section {
                Text("Row 1")
                Text("Row 2")
            } header: {
                Text("Header")
                    .font(.title3)
                    .padding()
            } footer: {
                Text("Footer")
                    .font(.body)
                    .padding()
            }

        }
        .listStyle(.insetGrouped)
        
        Spacer()
    })
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .environment(\.defaultMinListRowHeight, 50)
 }

字符串
问题是,无论我添加多少太空族,列表总是位于最上方,我该如何将列表置于超级视图的中心位置?

kknvjkwl

kknvjkwl1#

似乎List报告其理想高度为0,这不是很有帮助。这防止了.fixedSize被用来限制其理想高度。基于其内容的理想高度执行其布局的自定义Layout也将不起作用(这是一个耻辱)。
然而,另一种找到List所需高度的方法是使用GeometryReader来检查列表中项目的相对位置,特别是页脚。然后可以使用此方法为List设置maxHeight

@State private var maxListHeight = CGFloat.infinity
var body: some View {
    GeometryReader { outer in
        VStack {
            List {
                Section {
                    Text("Row 1")
                    Text("Row 2")
                } header: {
                    Text("Header")
                        .font(.title3)
                        .padding()
                } footer: {
                    Text("Footer")
                        .font(.body)
                        .padding()
                        .background {
                            GeometryReader { inner in
                                Color.clear
                                    .onAppear {
                                        let maxY = inner.frame(in: .global).maxY
                                        maxListHeight = maxY - outer.safeAreaInsets.top
                                    }
                            }
                        }
                }
            }
            .listStyle(.insetGrouped)
            .frame(maxHeight: maxListHeight)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .environment(\.defaultMinListRowHeight, 50)
    }
}

字符串


的数据
你会注意到全局坐标空间被用来寻找页脚的位置,所以List的高度是通过减去顶部安全区域内插的高度来计算的。这些内插是由VStack周围的另一个GeometryReader测量的。
我想通过使用List的坐标空间可以避免外部的GeometryReader。但是,我发现List中的项目(或者至少是部分页脚)不能引用容器的坐标空间,所以它总是默认为全局坐标空间。
这意味着,如果List不是布局中的第一个项目,那么当从页脚的位置计算List的高度时,您需要减去它之前的任何项目的高度。

相关问题