自定义 SwiftUI ListView 行

Question

我正在尝试实现在图像中布局的 ListView 行，其中顶部静态视图延伸到屏幕末尾，没有填充，也没有角半径。

我尝试使用 UIScreen 的宽度但没有成功

Struct MyView: View {

   var body: some View {
      List {
        topStaticView
          .cornerRadius(0)
          .frame(width: UIScreen.main.bounds.width)
       
        bottomView
      }
      .listStyle(.insetGrouped)
   }

}

extension MyView {
   var topStaticView: some View {
      ...
   }

   var bottomView: some View {
      ...
   }
}

Answer 1

这个问题似乎都是关于顶视图周围的填充。顶视图由图表及其控件组成。

为了演示这些选项，我将

topStaticView

和

bottomView

简化为以下内容：

var topStaticView: some View {
    Text("topStaticView")
        .frame(height: 200)
        .frame(maxWidth: .infinity)
        .background(.yellow)
}

var bottomView: some View {
    Text("bottomView")
        .frame(height: 200)
        .frame(maxWidth: .infinity)
        .background(.gray)
}

1。列表样式 insetGrouped

在OP中，您已应用

.insetGrouped

作为列表样式。使用这种样式，您可以通过设置

.listRowInsets(EdgeInsets())

来减少插图，但它不会删除侧面的填充：

List {
    topStaticView
        .listRowInsets(EdgeInsets())
    bottomView
}
.listStyle(.insetGrouped)

您会注意到组部分的角是圆角的。由于顶视图没有插图，因此顶部部分的顶角也已倒圆。

2。列表样式普通

现在让我们尝试使用

.plain

作为列表样式：

List {
    topStaticView
        .listRowInsets(EdgeInsets())
    bottomView
}
.listStyle(.plain)

我想这就是你想要的，对吧？侧面的填充物消失了，圆角也消失了。

3.一个简单的VStack

我在评论中问为什么它需要是

List

。如果它不必是

List

那么您也可以使用简单的

VStack

来实现相同的布局，并在

bottomView

周围进行填充：

VStack(spacing: 0) {
    topStaticView
    bottomView
        .padding()
}

如果内容没有填满显示屏（如我的示例中的情况），那么您可以在

Spacer()

上添加

VStack

将内容推到顶部或底部。另一方面，如果内容比显示长，则可以将其嵌套在

ScrollView

中。