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

Question

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

15

我创建了一个列表(List)，里面添加了一个VStack，并在VStack中添加了一些视图。运行项目时，观察到List的滚动超出了安全区域。提示：如果我删除Frame属性，结果仍然相同。模拟器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")
    }
}
}

- Muhammad Shauket

3个回答

13

我曾经也遇到了ScrollView的同样问题。

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

只需在您的List或ScrollView中添加.clipped()修饰符，就可以防止内容滚出其边界。

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

- Alan Scarpa

1

这应该是被接受的答案。 - virusss8

0

您还可以使用 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()
     }
  }

- Ketan Odedra

最好进行填充，不仅限于顶部而是全部填充，因为在横向或者视图中，仍然可能超出安全区域，也不需要分离VStack。 - Muhammad Shauket

@ShauketSheikh 是的，只需使用.padding()即可实现。 - Ketan Odedra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kontiki · Accepted Answer

受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)
    }
}