ScrollView 内容未填写 SwiftUI

Question

我有一个滚动视图，其内容是 VStack，其中包含一个 ForEach 循环来创建一些行而不是列表。 List 有一些缺点，比如分隔线。

我的问题是行没有填充滚动视图。我认为滚动视图的宽度没有填满屏幕。

NavigationView {
        Toggle(isOn: $onlineStatus) {
            Text("Online Only")
        }.padding([.leading, .trailing], 15)

        ScrollView {
            VStack(alignment: .trailing) {
                ForEach(onlineStatus ? self.notes.filter { $0.dot == .green } : self.notes) { note in
                    NavigationButton(destination: Text("LOL")) {
                        CardRow(note: note)
                            .foregroundColor(.primary)
                            .cornerRadius(8)
                            .shadow(color: .gray, radius: 3, x: 0, y: -0.01)
                    }.padding([.leading, .trailing, .top], 5)
                }.animation(self.onlineStatus ? .fluidSpring() : nil)
            }
        }.padding([.leading, .trailing])

        .navigationBarTitle(Text("Your documents"))
    }

这给了我这个结果：

那是我的 CardRow：

struct CardRow: View {
var note: Note

var body: some View {
    HStack {
        Image(uiImage: UIImage(named: "writing.png")!)
            .padding(.leading, 10)

        VStack(alignment: .leading) {
            Group {
                Text(note.message)
                    .font(.headline)
                Text(note.date)
                    .font(.subheadline)
            }
            .foregroundColor(.black)
        }

        Spacer()
        VStack(alignment: .trailing) {
            Circle().foregroundColor(note.dot)
                .frame(width: 7, height: 7)
                .shadow(radius: 1)
                .padding(.trailing, 5)
            Spacer()
        }.padding(.top, 5)
    }
    .frame(height: 60)
    .background(Color(red: 237/255, green: 239/255, blue: 241/255))
}

}

Answer 1

在 RowView 或其内部使用 .frame(minWidth: 0, maxWidth: .infinity)

Answer 2

尝试将 RowView 的框架宽度设置为 UIScreen.main.bounds.width： .frame(width: UIScreen.main.bounds.width)

Answer 3

我找到的最佳解决方案是使用 GeometryReader 将 ScrollView 的内容填充到外部视图的宽度。并确保在每一行的 HStack 中使用 Spacer()。这可以很好地处理安全区域和旋转。

struct Card : View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Header")
                    .font(.headline)
                Text("Description")
                    .font(.body)
            }
            Spacer()
        }
            .padding()
            .background(Color.white)
            .cornerRadius(8)
            .shadow(color: Color.black.opacity(0.15), radius: 8, x: 0, y: 0)
    }
}

struct Home : View {
    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                ScrollView {
                    VStack(alignment: .leading, spacing: 16) {
                        Card()
                        Card()
                        Card()
                    }
                        .padding()
                        .frame(width: geometry.size.width)
                }
                    .navigationBarTitle(Text("Home"))
            }
        }
    }
}

查看生成的屏幕截图：