iOS:在Form中使用LazyVGrid作为行时定位不一致

q8l4jmvw  于 2023-07-01  发布在  iOS
关注(0)|答案(1)|浏览(178)

我有一段代码,其中窗体内的LazyVGrid第一次没有正确呈现。经过一些滚动后,它可以正确呈现。
这是iOS 16。
我的问题可以用这段代码重现。如果您尝试它,请使用iPhone(模拟器)来限制宽度。

import SwiftUI
struct ContentView: View {
    var body: some View {
        Form {
            Section(header: Text("Section 1")) {
                CustomVGrid()
            }

            Section(header: Text("Section 2")) {
                CustomVGrid()
            }
        }
    }
}

struct CustomVGrid: View {
    let layout = [GridItem(.adaptive(minimum: 350, maximum: 500), spacing: 20)]

    var body: some View {
        LazyVGrid(columns: layout, alignment: .leading, spacing: 20) {
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
                //.frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity)
                .background(Color.green)
            ForEach(0..<20, id: \.self) { index in
                VStack {
                    Text("\(index): Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  ")
                        .background(Color.red)
                    Spacer()
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

当第一次启动时,代码呈现如下:

您会看到第一个绿色单元格上方意外出现的大白色。
当再次上下滚动时,它会正确渲染:

您不会在绿色单元格上方看到意外白色。
如何使它在第一次正确呈现,而不滚动?(旋转和旋转回来也解决了这个问题)

ztmd8pv5

ztmd8pv51#

很多时候,解决这些布局错误的方法是改变.onAppear()上的视图。LazyVGrid似乎喜欢一个确定的高度时,它是第一次布局,然后它是罚款与任何之后。这是丑陋的,但它似乎解决了你的问题:

struct CustomVGrid: View {
    let layout = [GridItem(.adaptive(minimum: 350, maximum: 500), spacing: 20)]
    // Set a var to trigger the height change
    @State var changeHeight: Bool = true
    
    var body: some View {
        LazyVGrid(columns: layout, alignment: .leading, spacing: 20) {
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
                // Use the bool to trigger the height change.
                .frame(maxHeight: changeHeight ? 100 : .infinity)
                .background(Color.green)
            ForEach(0..<20, id: \.self) { index in
                VStack {
                    Text("\(index): Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  ")
                        .background(Color.red)
                    Spacer()
                }
            }
        }
        // In onAppear, trigger the change
        .onAppear {
            changeHeight.toggle()
        }
    }
}

相关问题