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

- Jake

Answer 1

那是因为您在错误的视图上使用了GeometryReader，请尝试使用以下代码并检查结果：

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ScrollView(.horizontal, showsIndicators: false){
                HStack{
                    ForEach(0..<14){ _ in
                        Card()
                            .frame(width: geometry.size.width, height: geometry.size.height/1.5)
                            .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
            }.cornerRadius(20)
                .padding(.leading)
        }
    }
}

- denis_lor

Answer 2

欢迎来到Stackoverflow！

我猜你想让卡片的宽度与屏幕大小相等，并希望它在滚动视图中，就像截图一样。如果是这样，请继续阅读...

你走对了路。但最好在创建卡片时设置框架，而不是在设置其body时进行。

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

- Glenn Posadas

---

你可能还应该像问题中的代码一样添加 cornerRadius(20)。 - denis_lor