在swiftui中,如何增加按钮的高度?

时间:2019-12-11 16:24:00

标签: swift macos user-interface button swiftui

如您在屏幕截图中所见,按钮的高度无法调整以适应文本大小,从而使其看起来很难看。我怎样才能提高按钮的高度,所以它看起来并不愚蠢。我的问题是,如何增加swiftui中按钮的高度。我正在尝试使我的《我的世界》游戏像游戏一样。

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

Not nicely looking window

4 个答案:

答案 0 :(得分:3)

您只需要设置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())

custom button

答案 1 :(得分:3)

如果您只需要Button的标题,请使用更简单的初始化程序:

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

Preview

请注意frame修饰符必须位于background之前,以使其看起来更大。否则,您将看不到差异。

答案 2 :(得分:0)

您需要更改堆栈的高度

cpp

答案 3 :(得分:0)

请尝试以下代码:

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)

输出 enter image description here