Как выровнять текст по центру кнопки при использовании произвольной длины hstack?

Уменьшите интервал в HStack. В вашем случае интервал составляет 275, поэтому попробуйте уменьшить его до 50 или 40, и вы начнете видеть текст. Поскольку интервал 275 превышает ширину кнопки, текст выходит за пределы поля зрения кнопки и, следовательно, вы не можете его увидеть.

Код ниже представляет собой исправленный код:

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


      }
    }
  }
}

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

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

В createBlueButton() я уменьшил интервал до 40, а в createBlueButton() — до 50.

И после Edit1...

Модификатор кадра должен применяться перед ClipShape RoundedRectangle и модификатором цвета фона. Это сделает кнопку нужного размера с видимым текстом.

И да, порядок модификаторов имеет большое значение при разработке компонента в SwiftUI.

Все изменения присутствуют в приведенном выше коде.

Вот результат:

Я бы предложил следующие изменения:

• Вместо применения spacing к HStack используйте один или несколько Spacer(), чтобы задать интервал:

HStack {
    Image(systemName: systemName)
    Spacer()
    Text(title)
    Spacer()
}

• Причина, по которой ваши попытки установить ширину рамки не увенчались успехом, может заключаться в том, что вам нужно установить ширину перед применением цвета фона. Таким образом, модификатор .frame должен стоять перед .background и .clipShape.

• Ваш класс CustomButton похоже на фабрику пуговиц. Однако нет необходимости создавать экземпляр для каждой кнопки. Фактически вы создали два экземпляра с именами footballLoginButton и baseballLoginButton, но затем используете footballLoginButton для создания обеих реальных кнопок, baseballLoginButton не используется. Поэтому я бы предложил изменить функции на статические, и это тоже может быть struct вместо class.

• Вместо использования фиксированной ширины и высоты просто позвольте содержимому найти свой собственный размер, а затем используйте отступы, чтобы добавить пробелы там, где это необходимо.

• Когда дело доходит до стиля кнопок, лучше всего определить свой собственный ButtonStyle.

• Модификатор .foregroundColor устарел, вместо него используйте .foregroundStyle.

Вот как все это может сочетаться:

struct HomePage: View {

    var body: some View {
        ZStack {
            // Background gradient
            LinearGradient(gradient: Gradient(colors: [.blue, .green]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
            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)
                    .foregroundStyle(.white)

                CustomButton.createBlueButton(withTitle: "football Login", systemName: "football") {
                    // Your football login action code here
                }

                CustomButton.createGreenButton(withTitle: "baseball Login", systemName: "baseball") {
                    // Your baseball login action code here
                }
            }
            .padding(.horizontal, 30)
        }
    }
}

class CustomButton {

    private struct CustomButtonStyle: ButtonStyle {
        let color: Color

        func makeBody(configuration: Configuration) -> some View {
            configuration.label
                .foregroundStyle(.white)
                .fontWeight(.bold)
                .padding()
                .background(color)
                .clipShape(RoundedRectangle(cornerRadius: 20)) // Squircle shape
        }
    }

    private static func createButton(withTitle title: String, systemName: String, color: Color, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack {
                Image(systemName: systemName)
                Spacer()
                Text(title)
                Spacer()
            }
        }
        .buttonStyle(CustomButtonStyle(color: color))
    }

    static func createBlueButton(withTitle title: String, systemName: String, action: @escaping () -> Void) -> some View {
        CustomButton.createButton(withTitle: title, systemName: systemName, color: .blue, action: action)
    }

    static func createGreenButton(withTitle title: String, systemName: String, action: @escaping () -> Void) -> some View {
        CustomButton.createButton(withTitle: title, systemName: systemName, color: .green, action: action)
    }
}