Question

我正在尝试创建一个列表，其中包含卡片或行向下增长的行。它已添加到可以具有多个列表的水平滚动视图。

如何使卡片填满宽度-屏幕有一些填充？

当前代码是

struct RowView: View {
    var body: some View {
        Rectangle()
        .foregroundColor(.blue)
        .frame(width: 80, height: 80, alignment: .center)  // shows a square, but how to set size depending on screen?
        //.frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity, alignment: .topLeading)  // nothing shows up
    }
}

struct ListView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                RowView()
                RowView()
                RowView()
            }
            .padding()
        }
    }
}

struct ContentView: View {

    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ListView()
                ListView()
                ListView()
            }
        }
    }
}

我尝试使用GeometryReader，但不起作用。

Answer 1

我尝试使用GeometryReader，但不起作用。

您尝试使用View的{{1}}组件很重要。

如果您位于跨过屏幕尺寸的典型GeometryReader内，则会得到屏幕本身的View和width。
如果您处于height环境中，则会得到
- ScrollView的容器，以进行height对齐
- .horizontal的容器，以进行width对齐

我实际上无法直观地看到.vertical和.horizontal对齐的滚动视图所要实现的目标。但是您所说的 Card 之类的视图会一直扩展到整个屏幕宽度，您可以使用以下代码来实现它：（请参阅内联注释以更好地理解）

.vertical

Answer 2

要填充屏幕的宽度，可以将GeometryReader添加到ContentView并使用它来设置HStack的宽度。在那里也设置填充。

（填充和框架的顺序很重要，GeometryReader的位置也很重要，以拾取屏幕宽度。）

关于高度，可以直接设置为矩形。您在这里有几个效果相似的选项。既然您说列表将向下增长，并且矩形位于ScrollView中，那么设置固定高度将很有意义。

struct RowView: View {
    var body: some View {
        Rectangle()
            .foregroundColor(.blue)
            .frame(height: 100)
            //.frame(idealHeight: 100)
            //.frame(minHeight: 100)
    }
}

struct ListView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                RowView()
                RowView()
                RowView()
            }
            .padding()
        }
    }
}

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.horizontal) {
                HStack {
                    ListView()
                    ListView()
                    ListView()
                }
                .padding()
                .frame(width: geometry.size.width)
            }
        }
    }
}

P.S。如果我正确理解要在屏幕上水平填充并且仅将列表向下增加的情况，则可能不需要ContentView中的水平ScrollView。但是，如果这不是您要尝试的操作，请澄清一下，因为此解决方案可能无法实现您想要的目标。

如何使用SwiftUI使用某些填充使行填充屏幕宽度？

2 个答案: