SwiftUI中如何为内部HStack元素添加均等间距以填充可用空间？

问题描述 #

当前使用以下SwiftUI代码实现带图标的按钮布局：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 20) {
            ExtractedView(text: "Energy")
            ExtractedView(text: "Breath Control")
                
        }
        .padding(.horizontal, 20)
    }
}

#Preview {
    ContentView()
}

struct ExtractedView: View {
    let text: String
    
    var body: some View {
        Button {
            
        } label: {
            HStack(spacing: 8) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
                    .lineLimit(1)
                    .font(.system(size: 18, weight: .bold))
            }
            .padding(.horizontal, 8)
            .padding(.vertical, 8)
            .background {
                Color.yellow
            }
        }
    }
}

当前效果：

想要实现的目标效果：

需求是为每个按钮的文本后方添加均等间距，但尝试调整代码时出现了按钮尺寸强制均等、长文本换行或空间充足时文本被截断的问题，需要可行的解决方法。

解决方案 #

要实现文本后方间距均等的效果，核心是让每个按钮的文本右侧到按钮边缘的距离固定，同时保持按钮宽度自适应内容，避免强制均等或文本截断。可以通过以下方式修改ExtractedView：

struct ExtractedView: View {
    let text: String
    // 定义文本后方的固定间距，可按需调整
    private let trailingSpacing: CGFloat = 20
    
    var body: some View {
        Button {
            
        } label: {
            HStack(spacing: 8) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
                    .lineLimit(1)
                    .font(.system(size: 18, weight: .bold))
                // 添加Spacer让文本靠左对齐，确保右侧固定间距生效
                Spacer(minLength: 0)
            }
            // 拆分水平内边距：左侧保留原有间距，右侧使用固定值
            .padding(.leading, 8)
            .padding(.trailing, trailingSpacing)
            .padding(.vertical, 8)
            .background {
                Color.yellow
            }
        }
    }
}

原理说明 #

1. 拆分水平内边距：将原来统一的.padding(.horizontal, 8)拆分为左侧固定8、右侧自定义固定值，确保文本到按钮右边缘的间距完全一致。
2. 添加Spacer：HStack内的Spacer(minLength: 0)会填充图标+文本到按钮右边缘的剩余空间，让文本始终靠左对齐，同时按钮宽度根据内容自动适配，不会强制所有按钮尺寸均等。
3. 避免文本异常：lineLimit(1)配合自适应宽度，在空间充足时文本不会换行或截断；空间不足时会保持单行并自动截断，符合SwiftUI的默认适配逻辑。

如果需要让所有按钮宽度一致（同时保留文本后方均等间距），可在ExtractedView的外层添加.frame(minWidth: .infinity)，按钮会自动撑满父容器的可用空间，按需选择即可。

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