SwiftUI自定义HStack长度时如何让按钮文字居中并正常显示？

问题描述 #

作为iOS和Swift新手，我在创建应用首页时遇到按钮文字不显示的问题。首页包含两个自定义按钮，预览中看不到文字；若将HStack的spacing改为75，文字可见但按钮尺寸变小。相关代码如下：

首页代码 #

import SwiftUI

struct HomePage: View {

  var body: some View {
    ZStack {
        // Background gradient
        LinearGradient(gradient: Gradient(colors: [.blue, .green]), startPoint: .topLeading, endPoint: .bottomTrailing)
        .ignoresSafeArea()
        let footballLoginButton = CustomButton()
        let baseballLoginButton = CustomButton()
        VStack(spacing: 40) {
            // App Logo (replace with your actual logo)
            Image("your_app_logo")
              .resizable()
              .scaledToFit()
              .frame(width: 150, height: 70)

            Text("Select your sport:")
              .font(.title)
              .fontWeight(.bold)
              .foregroundColor(.white)

            footballLoginButton.createBlueButton(withTitle: "football Login", height: 70, width: 250, color: "blue", systemName: "football", action: {
              // Your football login action code here
            })

            footballLoginButton.createGreenButton(withTitle: "baseball Login", height: 70, width: 250, color: "green", systemName: "baseball", action: {
              // Your football login action code here
            })

        }
    }
  }
}

struct HomePage_Previews: PreviewProvider {
  static var previews: some View {
    HomePage()
  }
}

自定义按钮类代码 #

class CustomButton {
    
    func createBlueButton(withTitle title: String, height: CGFloat, width: CGFloat, color: String, systemName: String, action: @escaping () -> Void) -> some View {
        Button(action: {}) {
            HStack(spacing: 275) {
                Image(systemName: systemName)
                    .foregroundColor(.white)
                Text(title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
            }
            .padding()
            .background(Color.blue)
            .clipShape(RoundedRectangle(cornerRadius: 20)) // Squircle shape
            .frame(width: width, height: height) // Adjusted button size
        }
    }
    
    func createGreenButton(withTitle title: String, height: CGFloat, width: CGFloat, color: String, systemName: String, action: @escaping () -> Void) -> some View {
        Button(action: {}) {
            HStack(spacing: 275) {
                Image(systemName: systemName)
                    .foregroundColor(.white)
                Text(title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
            }
            .padding()
            .background(Color.green)
            .clipShape(RoundedRectangle(cornerRadius: 20)) // Squircle shape
            .frame(width: width, height: height) // Adjusted button size
        }
    }
}

问题原因 #

1. HStack间距过大：设置的spacing: 275远大于按钮宽度250，导致文本被挤出按钮可视区域，无法显示；
2. 布局顺序错误：.frame(width: width, height: height)放在.padding()之后，padding会额外增加按钮尺寸，导致指定的宽高失效；
3. 未传递action闭包：自定义按钮方法中，Button的action为空{}，点击不会触发任何操作；
4. 使用class而非struct：SwiftUI中视图工具类建议使用值类型struct，而非引用类型class；
5. 重复代码冗余：两个按钮方法逻辑重复，不利于维护。

修复后的代码 #

优化后的自定义按钮 #

struct CustomButton {
    // 通用按钮创建方法，通过参数区分样式
    func createButton(withTitle title: String, height: CGFloat, width: CGFloat, backgroundColor: Color, systemName: String, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack(spacing: 20) { // 合理间距，确保图标和文字都显示
                Image(systemName: systemName)
                    .foregroundColor(.white)
                Text(title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
            }
            .frame(width: width, height: height) // 先固定尺寸
            .padding() // 基于固定尺寸添加内边距
            .background(backgroundColor)
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
    }
}

优化后的首页代码 #

import SwiftUI

struct HomePage: View {
    // 提前初始化自定义按钮实例，避免重复创建
    let customButton = CustomButton()
    
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.blue, .green]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
            
            VStack(spacing: 40) {
                Image("your_app_logo")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 150, height: 70)
                
                Text("Select your sport:")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                
                // 创建蓝色足球按钮
                customButton.createButton(withTitle: "Football Login", height: 70, width: 250, backgroundColor: .blue, systemName: "football", action: {
                    // 执行足球登录操作
                })
                
                // 创建绿色棒球按钮
                customButton.createButton(withTitle: "Baseball Login", height: 70, width: 250, backgroundColor: .green, systemName: "baseball", action: {
                    // 执行棒球登录操作
                })
            }
        }
    }
}

struct HomePage_Previews: PreviewProvider {
    static var previews: some View {
        HomePage()
    }
}

修复说明 #

• 调整HStack的spacing为20，确保图标和文字都在按钮可视范围内；
• 重构按钮方法为通用方法，减少重复代码，通过backgroundColor参数控制按钮颜色；
• 调整布局顺序：先设置frame固定尺寸，再添加padding，确保按钮尺寸符合预期；
• 正确传递action闭包，点击按钮可执行对应操作；
• 将CustomButton从class改为struct，符合SwiftUI值类型设计规范；
• 在首页中提前初始化CustomButton实例，优化性能。

内容的提问来源于stack exchange，提问作者Metadata