Регулировка размера кадра VStack в swiftUI

Question

Не удается настроить размер моего кадра, чтобы он соответствовал полной ширине экрана в моем vstack в структуре Card.

Что я могу сделать, чтобы карты в натуральную величину, чтобы я мог настроить в зависимости от размера экрана?

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, как на скриншоте. Если это так, читайте дальше ...

Вы на правильном пути. Но создание карты лучше всего ставить при ее создании, а не при настройке ее 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)
    }
}

Answer 2

Это произошло из-за того, что вы использовали 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)
        }
    }
}