SwiftUI

Question

我创建列表并在其中添加 VStack，并在 VStack 中添加了一些视图。当我运行项目时，我观察到 List 的滚动超出了安全区域。仅供参考，如果我删除框架属性仍然是相同的结果。Simulator gif

struct ContentView : View {
var body: some View {

    List(0..<5) { item in
        HStack(alignment: VerticalAlignment.top, spacing: 5) {
            Image(systemName: "photo")
            VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                Text("USA")
                    .font(.headline)

                Text("This is an extremely long string that will never fit even the widest of Phones Excerpt From: Paul Hudson. “SwiftUI by Example”. Apple Books. ")
                    .lineLimit(nil)
                    .font(.subheadline)
            }
        }
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
    .background(Color.red)
        .onAppear() {
            print("on Appear")

    }.onDisappear() {
        print("on Disappear")
    }
}
}

Answer 1

灵感来自 Shauket Sheikh。您可以直接将 .padding(.top) 添加到 List 中并完成。不需要 VStack。

struct ContentView : View {
    var body: some View {
            List(0..<5) { item in
                HStack(alignment: VerticalAlignment.top, spacing: 5) {
                    Image(systemName: "photo")
                    VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                        Text("USA")
                            .font(.headline)
                        Text("This is an extremely long string that will never fit even the widest of Phones Excerpt From: Paul Hudson. “SwiftUI by Example”. Apple Books. ")
                            .lineLimit(nil)
                            .font(.subheadline)
                    }
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .background(Color.red)
                .onAppear() {
                    print("on Appear")
            }.onDisappear() {
                print("on Disappear")
            }
        .padding(.top)
    }
}

Answer 2

您也可以使用 VStack 并设置 .padding()。

代码：

 struct ContentView : View {
    var body: some View { 
       VStack {
            List(0..<5) { item in
                HStack(alignment: VerticalAlignment.top, spacing: 5) {
                    Image(systemName: "photo")
                    VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                        Text("USA")
                            .font(.headline)
                        Text("This is an extremely long string that will never fit even the widest of Phones Excerpt From: Paul Hudson. “SwiftUI by Example”. Apple Books. ")
                            .lineLimit(nil)
                            .font(.subheadline)
                    }
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                .background(Color.red)
                .onAppear() {
                    print("on Appear")
            }.onDisappear() {
                print("on Disappear")
            }
        }.padding()
     }
  }

Answer 3

我的 ScrollView

遇到了同样的问题

我的解决方案比其他解决方案更简单，所以试一试：

只需将 .clipped() 修饰符添加到您的 List 或 ScrollView，这应该可以防止您的内容滚动到其边界之外。

然后，如果您希望您的内容仍然从底部滚出屏幕，则可以将其与 edgesIgnoringSafeArea(.bottom) 结合使用。但请注意 - 如果您想要这种效果，edgesIgnoringSafeArea(.bottom) 必须在 .clipped() 之后。

SwiftUI - 列表在状态栏文本下方滚动

SwiftUI - List scrolling underneath status bar text

ios