在SwiftUI中，如何增加按钮的高度？

Question

如您在屏幕截图中所见，按钮高度并未根据文本大小进行调整，使其看起来很丑陋。我该如何增加按钮的高度，以使其不至于显得愚蠢。我的问题是，在SwiftUI中如何增加按钮的高度？我正在尝试制作类似Minecraft游戏的标题屏幕。

struct ContentView: View {
var body: some View {
    GeometryReader { geometry in
        VStack (spacing: 8) {
            Text("[Name not disclosed]Craft").font(.system(size: geometry.size.width/8))
            Button(action: {
                
            }) {
                Text("Singleplayer").font(.system(size: geometry.size.width/20))
                    .frame(minWidth: geometry.size.width/2)
            }
            Button(action: {
                
            }) {
                Text("Multiplayer").font(.system(size: geometry.size.width/20))
                    .frame(minWidth: geometry.size.width/2)
            }
            HStack (spacing: 8) {
                Button(action: {
                    
                }) {
                    Text("Options").font(.system(size: geometry.size.width/20))
                        .frame(minWidth: (geometry.size.width/4)-16)
                }
                Button(action: {
                    exit(EXIT_SUCCESS);
                }) {
                    Text("Quit Game").font(.system(size: geometry.size.width/20))
                        .frame(minWidth: (geometry.size.width/4)-16)
                }
            }
        }
    }
}

- user12353468

---

请查看：https://www.appcoda.com/swiftui-buttons/ - Dalija Prasnikar

请参考此处的答案，了解如何创建自定义按钮样式：https://dev59.com/b1MH5IYBdhLWcg3wwiSH - Victor Sanchez

Answer 1

您只需要设置PlainButtonStyle，然后根据您的需求进行绘制即可...

下面是您其中一个按钮的示例：

Button(action: {
    
}) {
    Text("Singleplayer").font(.system(size: geometry.size.width/20))
        .padding()
        .background(RoundedRectangle(cornerRadius: 8).fill(Color.blue))
        .frame(minWidth: geometry.size.width/2)
}
.buttonStyle(PlainButtonStyle())

- Asperi

---

如上所述，框架修饰符应该在背景修饰符之前，否则蓝色将无法填满整个框架。 - Dominick

Answer 2

请尝试以下代码：

Button(action: {
       //do action       
}) {
    Text("SIGN IN")
        .frame(width: 200 , height: 50, alignment: .center)
        //You need to change height & width as per your requirement
}
 .background(Color.blue)
 .foregroundColor(Color.white)
 .cornerRadius(5)

输出

- Rohit Makwana

Answer 3

- 为增加可点击按钮的大小：

您必须增加按钮的标签的大小，而不是更改它的框架：

Button {
    // Perform action here
} label: {
    Text("Hello")
        .frame(width: 100, height: 100)
}

---

- 用于占据区域，但不可点击：

如果您只需要为您的按钮设置标题，请使用更简单的初始化程序：

Button("Click me") {
    // Perform action here
}
.frame(width: 100, height: 100)
.background(Color.yellow)

请注意，frame修饰符必须放在background之前，才能使其看起来更大。否则，您将看不到区别。

- Mojtaba Hosseini

---

非常感谢，你救了我的一天。你的“请注意”部分起了魔力！ - Sakthimuthiah

这种方法的问题在于，只有文本部分可以被点击，而整个黄色背景是无法被点击的。 - Patrick

因为这种方法是错误的，所以被踩了。正如前面的评论者所说，只有按钮的文本部分可以点击。 - Alex

Answer 4

您需要更改堆栈的高度。

struct ContentView: View {

   @State private var arr = ["String"]

    var body: some View {

         GeometryReader { geometry in
                VStack (spacing: 8) {
                    Text("[Name not disclosed]Craft").font(.system(size: geometry.size.width/8))
                    Button(action: {

                    }) {
                        Text("Singleplayer").font(.system(size: geometry.size.width/20))
                            .frame(minWidth: geometry.size.width/2)
                    }
                    Button(action: {

                    }) {
                        Text("Multiplayer").font(.system(size: geometry.size.width/20))
                            .frame(minWidth: geometry.size.width/2)
                    }
                    HStack (spacing: 8) {
                        Button(action: {

                        }) {
                            Text("Options").font(.system(size: geometry.size.width/20))
                                .frame(minWidth: (geometry.size.width/4)-16)
                        }
                        Button(action: {
                            exit(EXIT_SUCCESS);
                        }) {
                            Text("Quit Game").font(.system(size: geometry.size.width/20))
                                .frame(minWidth: (geometry.size.width/4)-16)
                            }
                    } .frame(width: 100, height: 100, alignment: .leading) .background(Color.red)
                }
            }
    }
}

- Shehata Gamal

---

这里的几何是什么？ - Varun Naharia