ios - 在swiftUI中调整VStack的框架大小

Question

在 Card 结构中的 vstack 中将框架大小调整为屏幕的整个宽度时遇到问题。

如何使卡片为全尺寸，以便我可以根据屏幕尺寸进行调整？

struct ContentView: View {
var body: some View {
    VStack{
        ScrollView(.horizontal, showsIndicators: false){
            HStack{
            ForEach(0..<14){i in
                Card().padding(.leading)
                }
            }
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Card: View {
    var body: some View {
        GeometryReader{r in
            VStack(alignment: .leading){
                Color.red
            }.frame(width: r.size.width, height: r.size.height/1.5).cornerRadius(20).padding(.leading)
        }
    }

Answer 1

欢迎来到 Stackoverflow!

我想您希望卡片的宽度等于屏幕尺寸，并希望它位于屏幕截图中的 ScrollView 中。如果是这样，请继续阅读...

你走在正确的道路上。但是最好在创建卡片时放置卡片框架，而不是在设置其主体时放置。

struct ContentView: View {
    var body: some View {
        VStack{
            GeometryReader{r in
                ScrollView(.horizontal, showsIndicators: false){
                    HStack{
                        ForEach(0..<14) { i in
                            Card(color: Color.init(UIColor.random())).frame(width: r.size.width, height: r.size.height/1.5, alignment: .center)
                        }
                    }
                }
            }
        }
    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct Card: View {
    var color: Color
    var body: some View {
        GeometryReader{r in
            self.color
        }
    }
}

作为奖励，我们使用随机颜色。

extension UIColor {
    static func random() -> UIColor {

        func random() -> CGFloat { return .random(in:0...1) }

        return UIColor(red:   random(),
                       green: random(),
                       blue:  random(),
                       alpha: 1.0)
    }
}