在SwiftUI中，按钮不接受给定的高度和宽度。

Question

我是SwiftUI的新手。我正在制作一个登录界面，其中必须使用苹果和谷歌登录按钮。我正在使用自定义视图设计该按钮。这是自定义按钮视图的代码：

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)

       }

这是我的登录视图截图： 有人知道我做错了什么吗？

- Taimoor Arif

---

只需在Image()下添加.resizable()，以便它可以采用给定的高度和宽度。 - Qazi Ammar

Answer 1

你可以使用 Spacer() 或 Divider()。

Divider 会显示一些水平/垂直线条，我认为这不是你需要的，所以请尝试使用 Spacer()。

Spacer() 是什么？Spacer 是一个灵活的空间，它会随着视图的扩展而扩展。它将在布局部分中“削减”你的水平（但也包括垂直）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)

}

- Iskandir

---

你也可以这样做：Spacer() CustomSocialButton() Spacer() CustomSocialButton() Spacer()... - Iskandir

Answer 2

你需要使图像可调整大小，就像这样

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

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

- Asperi