ios - 如何: Format Swift UI Buttons

Question

我正在一步一步地弄清楚 Swift UI。在这里，我有一个带有嵌套 HStack 设置的 VStack，其中包含一些按钮。我需要对它们进行格式化，使它们看起来不那么困惑。.什么是正确的使用属性？是否有一个属性可以用于整个 HStack View 来自动处理这种格式？
模拟器:https://gyazo.com/d566bc3ba8ea4de446f346d7098c1424

import SwiftUI

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 {

                           Button(action: {}){
                               Text("Today's List")
                                   .bold()
                                   .font(Font.custom("Helvetica Neue", size: 21.0))
                                   .padding(18)
                                   .foregroundColor(Color.white)
                                   .background(Color.green)
                                   .cornerRadius(12)
                               
                           }
                           Button(action: {}){
                               Text("Tomorrow's List")
                                   .bold()
                                   .font(Font.custom("Helvetica Neue", size: 21.0))
                                   .padding(18)
                                   .foregroundColor(Color.white)
                                   .background(Color.green)
                                   .cornerRadius(12)
                           }
                           
                           
                           
                           
                       }
                       VStack {
                           HStack {
                               Button(action: {}){
                                   Text("This Month")
                                       .bold()
                                       .font(Font.custom("Helvetica Neue", size: 21.0))
                                       .padding(18)
                                       .foregroundColor(Color.white)
                                       .background(Color.green)
                                       .cornerRadius(12)
                               }
                               Button(action: {}){
                                                               Text("Next Month")
                                                                   .bold()
                                                                   .font(Font.custom("Helvetica Neue", size: 21.0))
                                                                   .padding(18)
                                                                   .foregroundColor(Color.white)
                                                                   .background(Color.green)
                                                                   .cornerRadius(12)
                                                           }
                           }
                         
                       }
                       
                       VStack {
                                      HStack {
                                          Button(action: {}){
                                              Text("3% Yeild Or Higher")
                                                  .bold()
                                                  .font(Font.custom("Helvetica Neue", size: 21.0))
                                                  .padding(18)
                                                  .foregroundColor(Color.white)
                                                  .background(Color.green)
                                                  .cornerRadius(12)
                                          }
                                          Button(action: {}){
                                                                          Text("5% Yeild Or Higher")
                                                                              .bold()
                                                                              .font(Font.custom("Helvetica Neue", size: 21.0))
                                                                              .padding(18)
                                                                              .foregroundColor(Color.white)
                                                                              .background(Color.green)
                                                                              .cornerRadius(12)
                                                                      }
                                      }
                                    
                                  }
                       VStack {
                                              HStack {
                                                  Button(action: {}){
                                                      Text("App Help")
                                                          .bold()
                                                          .font(Font.custom("Helvetica Neue", size: 21.0))
                                                          .padding(18)
                                                          .foregroundColor(Color.white)
                                                          .background(Color.green)
                                                          .cornerRadius(12)
                                                  }
                                                  Button(action: {}){
                                                                                  Text("More Apps")
                                                                                      .bold()
                                                                                      .font(Font.custom("Helvetica Neue", size: 21.0))
                                                                                      .padding(18)
                                                                                      .foregroundColor(Color.white)
                                                                                      .background(Color.green)
                                                                                      .cornerRadius(12)
                                                                              }
                                              }
                                            
                                          }
                   }
                   
               }
        }
    }
        //Header
        
        
        //Data
        
        
        
        //Buttons
       






struct StrokeText: View {
    let text: String
    let width: CGFloat
    let color: Color
    
    var body: some View {
        ZStack{
            ZStack{
                Text(text).offset(x:  width, y:  width)
                Text(text).offset(x: -width, y: -width)
                Text(text).offset(x: -width, y:  width)
                Text(text).offset(x:  width, y: -width)
                
            }
            .foregroundColor(color)
            Text(text)
        }
    }
}

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

编辑:我该怎么做才能使按钮变成这种形状？格式化为更多的盒子布局。
图片供引用: https://gyazo.com/e142e7358083987f3ebde48b66841f52

Answer 1

首先，你可能想要重构你的代码，清理它。假设添加一个返回 some View 的方法生成 Text给你的对象。我没有太多使用 SwiftUI，所以花几分钟浏览您的代码对我来说很有趣。

import SwiftUI

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(alignment: .center, spacing: 8) {
                HStack(alignment: .firstTextBaseline, spacing: 8) {
                    Button(action: {}){
                        self.newText("Today's List")
                    }
                    Button(action: {}){
                        self.newText("Tomorrow's List")
                    }
                }
                HStack(alignment: .firstTextBaseline, spacing: 8) {
                    Button(action: {}){
                        self.newText("This Month")
                    }
                    Button(action: {}){
                        self.newText("Next Month")
                    }
                }
                HStack(alignment: .firstTextBaseline, spacing: 8) {
                    Button(action: {}){
                        self.newText("% Yeild Or Higher")
                    }
                    Button(action: {}){
                        self.newText("5% Yeild Or Higher")
                    }
                }
                HStack(alignment: .firstTextBaseline, spacing: 8) {
                    Button(action: {}){
                        self.newText("App Help")
                    }
                    Button(action: {}){
                        self.newText("More Apps")
                    }
                }
            }
        }
    }
    
    func newText(_ text: String) -> some View {
        let text = Text(text)
            .bold()
            .font(Font.custom("Helvetica Neue", size: 21.0))
            .padding(18)
            .foregroundColor(Color.white)
            .background(Color.green)
            .cornerRadius(12)
        
        return text
    }
}

如您所见，您可以删除不必要的 VStack s，创建一个返回 Text 的“文本工厂”方法对象，利用堆栈的 alignment和 spacing .
这是你的输出:


编辑:您想平均分配按钮吗？我花时间进行实验，修补 View 的框架。
您需要设置按钮的背景颜色而不是文本。这样，您可以通过创建返回 some View 的按钮工厂方法来进一步重构代码。 .

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(alignment: .center, spacing: 4) {
                HStack(alignment: .center, spacing: 4) {
                    self.newButton(text: "Today's List") { }
                    self.newButton(text: "Tomorrow's List") { }
                }
                HStack(alignment: .firstTextBaseline, spacing: 4) {
                    self.newButton(text: "This Month") { }
                    self.newButton(text: "Next Month")  { }
                }
                HStack(alignment: .firstTextBaseline, spacing: 4) {
                    self.newButton(text: "% Yeild Or Higher")  { }
                    self.newButton(text: "5% Yeild Or Higher")  { }
                }
                HStack(alignment: .firstTextBaseline, spacing: 4) {
                    self.newButton(text: "App Help")  { }
                    self.newButton(text: "More Apps")  { }
                }
            }
        }
    }
    
    func newButton(text: String, action: @escaping () -> Void) -> some View {
        let button = Button(action: action){
            self.newText(text)
        }.background(Color.green)
            .cornerRadius(12)
            .frame(minWidth: 0,
                   maxWidth: .infinity,
                   minHeight: 0,
                   maxHeight: 100.0)
        
        return button
    }
    
    func newText(_ text: String) -> some View {
        let text = Text(text)
            .bold()
            .font(Font.custom("Helvetica Neue", size: 21.0))
            .padding(8)
            .foregroundColor(Color.white)
            .frame(maxWidth: .infinity, maxHeight: 100.0)
        
        return text
    }
}

这是你的新输出: