可滚动内容在 SwiftUI 中无法正常工作

Question

我正在尝试使用我的自定义视图创建滚动视图，但是当我添加滚动视图时它没有按预期工作，滚动视图工作正常。

    struct ContentView: View {
        var body: some View {
            ScrollView(.vertical) {
                VStack {
                    ForEach (0..<2) { _ in
                        ListItem()
                    }
                }
            }
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }


 // But the below code is working fine.
 
    struct ContentView: View {
        var body: some View {
            VStack {
                ForEach (0..<2) { _ in
                    ListItem()
                }
            }
        }
    }

// List Item

struct ListItem: View {
    var body: some View {
        VStack {
            HStack {
                Image("steve")
                    .resizable()
                    .clipShape(Circle())
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth:44, maxHeight: 44)
                VStack {
                    Text("Steve Jobs")
                        .font(.headline)
                        .frame(maxWidth: .infinity, alignment: .leading)

                    Text("1 hour ago")
                        .font(.footnote)
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                Spacer()

            }

            ZStack(alignment:.top) {
                GeometryReader { geometry in
                    VStack {

                        ZStack {
                            Image("poster_1")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .cornerRadius(8)
                                .shadow(color: Color.black.opacity(0.12),
                                        radius: 4, x: 1, y: 1)
                                .frame(width: geometry.size.width - 64,
                                       height: geometry.size.height * 0.35)
                                .padding([.horizontal], 32)
                                .clipped()

                            ZStack {
                                Rectangle()
                                    .fill(Color.black.opacity(0.75))
                                    .frame(maxWidth:84 , maxHeight: 84)
                                    .cornerRadius(12)
                                Image(systemName: "play.fill")
                                    .font(.system(size: 44, weight: .bold))
                                    .foregroundColor(.white)

                            }

                        }

                        VStack {
                            Text("Game of Thrones")
                                .accentColor(Color.gray.opacity(0.25))
                                .font(Font.subheadline.weight(.bold))
                                .padding([.horizontal], 32)
                                .padding([.bottom], 2)

                                .frame(maxWidth: .infinity,
                                       alignment: .leading)

                            VStack {
                                Text("Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss for HBO. ")
                                    .accentColor(Color.gray.opacity(0.25))
                                    .font(.footnote)
                                    .frame(maxWidth: .infinity,
                                           alignment: .leading)
                                    .padding([.horizontal], 32)
                                Text("Show more...")
                                    .accentColor(Color.gray.opacity(0.01))
                                    .font(Font.footnote.weight(.bold))
                                    .frame(maxWidth: .infinity,
                                           alignment: .trailing)
                                    .padding([.trailing], 32).onTapGesture {
                                        print("okay")
                                    }
                            }
                        }
                    }
                }
            }

        }
    }
}

ListItem 包含多个视图，可创建发布者信息和电影信息，如下图所示。

Scrollview 正在滚动，但图像未作为第一张图像显示在视图中。

Answer 1

这是您在 ListItem 中的几何体 reader。因为 GeometryReader 和 Scrollview 都没有自己的大小。由于既没有要渲染的尺寸，它们也会崩溃。这就是您在视图中看到的内容。参见 this answer。解决方案是将 GeometryReader 放入 Scrollview 之外的 ContentView 并将调用 geometry 的 GeometryProxy 发送到 ListItem 中，如下所示：

struct ContentView: View {
        var body: some View {
            GeometryReader { geometry in
                ScrollView(.vertical) {
                    VStack {
                        ForEach (0..<2) { _ in
                            ListItem(geometry: geometry)
                        }
                    }
                } // Scrollview
            } // GeometryReader
        }
    }

struct ListItem: View {
    let geometry: GeometryProxy
    
    var body: some View {
        ...
    }

这似乎在预览版中修复了它，但您可能必须在使用 geometry 的 .frame() 中更改乘数以根据需要调整大小。

可滚动内容在 SwiftUI 中无法正常工作

Scrollable content not working as expected in SwiftUI

swiftui

swiftui-list