SwiftUI - 列表在状态栏文本下方滚动 [英] SwiftUI - List scrolling underneath status bar text

问题描述

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

struct ContentView : View {var主体:一些视图{List(0..<5) { 项目在HStack(对齐:VerticalAlignment.top，间距:5){图像(系统名称:照片")VStack(对齐:Horizo​​ntalAlignment.leading，间距:10){文本(美国").font(.headline)Text("这是一个非常长的字符串，即使是最宽的手机也永远无法容纳.摘录自:Paul Hudson.SwiftUI 示例".Apple Books.").lineLimit(nil).font(.subheadline)}}}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(颜色.红色).onAppear() {打印(出现")}.onDisappear() {打印(消失")}.padding(.top)}}

I Create List and add VStack inside and added some views inside VStack. When I run the project, I observer scrolling of List going beyond the safe area. FYI if I remove Frame property still same result.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")
    }
}
}

解决方案

Inspired by Shauket Sheikh. You can directly add the .padding(.top) to the List and it's done. No need for a 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)
    }
}

这篇关于SwiftUI - 列表在状态栏文本下方滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！