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

w46czmvw  于 2023-04-28  发布在  Swift
关注(0)|答案(4)|浏览(221)

正如你在截图中看到的,按钮高度没有调整以适应文本大小,使其看起来很难看。我怎么才能增加按钮的高度,这样看起来就不傻了。我的问题是,如何在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)
                }
            }
        }
    }
}

00jrzges

00jrzges1#

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

imzjd6km

imzjd6km2#

请尝试以下代码:

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)

输出

pdtvr36n

pdtvr36n3#

-增加可点击按钮的大小:

您必须增加按钮label的大小,而不是更改其边框:

Button {
    // Perform action here
} label: {
    Text("Hello")
        .frame(width: 100, height: 100)
}
-用于保持区域,但不可点击:

如果您只需要为Button指定一个标题,请使用更简单的初始化器:

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

请注意frame修饰符必须位于background之前,以使其看起来更大。否则,你看不出区别。

rlcwz9us

rlcwz9us4#

您需要更改堆栈的高度

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

相关问题