按钮未在 SwiftUI 中采用给定的高度和宽度

Question

我是 swiftui 的新手。我正在制作一个登录屏幕，我必须在其中使用 apple 和 gmail 按钮登录。我正在使用自定义视图来设计按钮。这是自定义按钮视图的代码：

struct CustomSocialButton: View {
    
    var ImgName: String
    
    var body: some View {
        
        
        Button(action: {
                  print("button pressed")

                }) {
                    Image(ImgName)
                    .renderingMode(.original)
                }
        
    }
}

struct CustomSocialButton_Previews: PreviewProvider {
    static var previews: some View {
        CustomSocialButton(ImgName: ImageName.appleSignin.rawValue)
    }
}

我正在将图像名称保存到我的常量文件中。

问题是当我将它用于我的实际 登录视图 并设置它的宽度和高度。它没有占用那个高度和宽度。这是按钮的代码：

HStack(spacing: 10) {
                   
          CustomSocialButton(ImgName: ImageName.appleSignin.rawValue)
                .frame(width: 48, height: 48)
                   
          CustomSocialButton(ImgName: ImageName.googleSignin.rawValue)
                .frame(width: 48, height: 48)

       }

这是我登录查看的截图：

有谁知道我做错了什么吗？

Answer 1

您可以与 Spacer() 或 Divider()。

分隔线会显示一些水平/垂直线，我认为这不是你需要的，所以试试 Spacer()。

Spacer() 有什么作用？ Spacer 是一个灵活的 space，可以随着您的视野扩展。它会在布局部分水平（但也垂直）“减少”你的 HStack (VStack)。如果您想将文本居中，可以使用

HStack{
    Spacer()
    Text("Hi there");
    Spacer()
}

要解决您的问题，请尝试以下操作：

HStack(spacing: 10) {

    CustomSocialButton(ImgName: ImageName.appleSignin.rawValue)
                .frame(width: 48, height: 48)
    Spacer()
    
    CustomSocialButton(ImgName: ImageName.googleSignin.rawValue)
                .frame(width: 48, height: 48)

}

Answer 2

您需要使图像可调整大小，例如

Image(ImgName)
   .renderingMode(.original)
   .resizable()               // << here !!

可能还想添加 .aspectRatio(contentMode: .fit)

按钮未在 SwiftUI 中采用给定的高度和宽度

Button is not Taking Given Height and Width in SwiftUI

xcode

button

ios

swiftui

swiftui-button