如何：使用ZStack，VStack，HStack在Swift UI中进行布局

Question

我正在尝试使用V和H堆栈在Swift UI中实现此布局https://gyazo.com/9714f8f1bff98edb3365338563b28fe8。到目前为止，我已经实现了https://gyazo.com/fec9ae229e59a41add6542c9a8ad31af。我还没有找到正确的方法来进行更多操作。哪些属性可以帮助我实现所需的布局？

更新！到目前为止，这是我想出的...差不多。

更新的代码和画布在这里：https://gyazo.com/d12b9a831f50c25f8f854dc2143c93dc

import SwiftUI

struct CustomBlock: View {
    var leading: String
    var trailing: String
    var body: some View {
        VStack {
            HStack (alignment: .firstTextBaseline, spacing: 18){
                Button(action: {}){
                    Text(leading)
                        .bold()
                        .font(Font.custom("Helvetica Neue", size: 21.0))
                        .padding(25)
                        .foregroundColor(Color.white)
                        .background(Color.green)
                        .cornerRadius(12)
                        .multilineTextAlignment(.center)
                    .fixedSize()
                        .frame(width: 150, height: 50, alignment: .center)
                    
                    
                }
                Button(action: {}){
                    Text(trailing)
                        .bold()
                        .font(Font.custom("Helvetica Neue", size: 21.0))
                        .padding(25)
                        .foregroundColor(Color.white)
                        .background(Color.green)
                        .cornerRadius(12)
                        .multilineTextAlignment(.center)
                    .fixedSize()
                    .frame(width: 150, height: 50, alignment: .center)

                }
            }

        }.padding()
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0)        .edgesIgnoringSafeArea(.all)
            VStack {

                HStack {
                    StrokeText(text: "Dividend Chaser", width: 0.5, color: .black)
                                       .foregroundColor(.white)
                                       .font(.system(size: 45, weight: .bold))
                                      
                  
                                  
                }
                ZStack {
                    RoundedRectangle(cornerRadius: 25, style: .continuous)
                                                                                           .fill( Color.init(red: 0.33, green: 0.56, blue: 0.27))
                                                                                           .frame(width: 350, height: 240)
                }
                CustomBlock(leading: "Today's List", trailing: "Tomorrow's List").lineLimit(2)
                CustomBlock(leading: "This Month", trailing: "Next Month").lineLimit(2)
                CustomBlock(leading: "3% Yeild Or Higher", trailing: "5% Yeild Or Higher").lineLimit(2)
                CustomBlock(leading: "App Help", trailing: "More Apps").lineLimit(2)
            }
        }
    }
}

Answer 1

这是方法的演示。在Xcode 12 / iOS 14上进行了测试。

struct DemoButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white).font(Font.body.bold())
            .frame(maxWidth: .infinity).padding(.vertical, 10)
            .background(RoundedRectangle(cornerRadius: 8).fill(Color.green))
            .multilineTextAlignment(.center)
            .frame(maxWidth: .infinity)
    }
}

struct TestButtonsGridLayout: View {
    var body: some View {
        VStack(spacing: 1) {
            HStack(spacing: 1) {
                Button("Today's\nList") {}
                Button("Tomorrow's\nList") {}
            }
            HStack(spacing: 1) {
                Button("This\nMonth") {}
                    .overlay(RoundedRectangle(cornerRadius: 8)
                        .stroke(lineWidth: 4).foregroundColor(.white).padding(2))
                Button("Next\nMonth") {}
            }
            
            // .. other same here

        }.buttonStyle(DemoButtonStyle())
    }
}

注意： a）可以为每个按钮应用按钮样式b）显示覆盖选择也可以以样式移动并由某些状态变量激活。