如何避免HStack因中间按钮切换播放/暂停标签而改变宽度？

问题根源是SF Symbols中play和pause图标的固有宽度不同，切换时按钮尺寸变化，进而导致HStack宽度波动。以下是几种可靠的解决方式：

方案1：给按钮标签设置固定尺寸 #

为三个按钮的标签统一设置固定宽高，确保无论图标如何切换，按钮尺寸保持一致，同时保持视觉上的统一性：

修改按钮的label部分（以中间按钮为例，建议三个按钮同步设置）：

Button {
    isSpeaking.toggle()
} label: {
    Image(systemName: isSpeaking ? "pause" : "play")
        .font(.system(size: 32))
        .frame(width: 44, height: 44) // 固定尺寸，匹配32号字体+左右各6padding的总大小
        .padding(6)
        .foregroundStyle(.darkBlue10)
        .clipShape(Circle())
}

方案2：使用fixedSize保持最大固有尺寸 #

给中间按钮添加fixedSize()修饰符，让按钮始终保持其最大状态（即pause图标时的宽度），切换到play图标时也不会缩小：

Button {
    isSpeaking.toggle()
} label: {
    Image(systemName: isSpeaking ? "pause" : "play")
        .font(.system(size: 32))
        .padding(6)
        .foregroundStyle(.darkBlue10)
        .clipShape(Circle())
}
.fixedSize() // 锁定按钮的最大固有尺寸

方案3：让图标占据相同宽度空间 #

给图标本身设置最小宽度，取pause图标的宽度作为基准，确保play图标也占据同等宽度空间：

Image(systemName: isSpeaking ? "pause" : "play")
    .font(.system(size: 32))
    .frame(minWidth: 32) // 最小宽度匹配pause图标的宽度
    .padding(6)
    .foregroundStyle(.darkBlue10)
    .clipShape(Circle())

修改后的完整代码（方案1示例） #

struct HomeTest: View {
    @State private var isSpeaking: Bool = false
    
    var body: some View {
        HStack(spacing: 18) {
            Button {
                
            } label: {
                Image(systemName: "gobackward")
                    .font(.system(size: 32))
                    .frame(width: 44, height: 44)
                    .padding(6)
                    .foregroundStyle(.darkBlue10)
                    .clipShape(Circle())
            }
            Button {
                isSpeaking.toggle()
            } label: {
                Image(systemName: isSpeaking ? "pause" : "play")
                    .font(.system(size: 32))
                    .frame(width: 44, height: 44)
                    .padding(6)
                    .foregroundStyle(.darkBlue10)
                    .clipShape(Circle())
            }
            Button {
                
            } label: {
                Image(systemName: "goforward")
                    .font(.system(size: 32))
                    .frame(width: 44, height: 44)
                    .padding(6)
                    .foregroundStyle(.darkBlue10)
                    .clipShape(Circle())
            }
        }
        .padding(.horizontal, 6)
        .padding(.vertical, 4)
        .background(.lightBlue10.opacity(0.7))
        .mask { Capsule() }
        .overlay {
            RoundedRectangle(cornerRadius: 36)
                .inset(by: 1)
                .stroke(.white, lineWidth: 1)
        }
    }
}

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