SwiftUI中设置进度条与手机边缘间距及文本对齐问题

修改后的代码 #

struct SeasonsDetailsProgressBar: View {
    var bar: Float = 0.5
    var body: some View {
        HStack(spacing: 22) {
            Text("Step")
                .bold()
                .font(.system(size: 12))
            
            // 右侧内容容器，占满剩余空间
            VStack(alignment: .leading, spacing: 8) {
                HStack {
                    Text("Total steps taken")
                        .font(.system(size: 10))
                    Spacer()
                    Text("3.214.629 / 5.000.0000")
                        .font(.system(size: 10))
                }
                
                ZStack(alignment: .leading) {
                    // 进度条背景，占满容器宽度
                    RoundedRectangle(cornerRadius: 4, style: .continuous)
                        .frame(height: 4)
                        .foregroundColor(Color.black.opacity(0.1))
                    // 进度条前景，按比例计算宽度
                    RoundedRectangle(cornerRadius: 4, style: .continuous)
                        .frame(width: .infinity, alignment: .leading)
                        .scaleEffect(x: CGFloat(bar), anchor: .leading)
                        .foregroundColor(Color(red: 0.965, green: 0.224, blue: 0.49))
                }
            }
        }
        // 设置与屏幕边缘的左右间距为24
        .padding(.horizontal, 24)
    }
}

关键修改点 #

• 移除冗余的GeometryReader：原代码的GeometryReader导致进度条宽度计算逻辑混乱，直接通过HStack布局让右侧VStack占满剩余空间，更符合SwiftUI的布局逻辑。
• 修正屏幕间距：将原有的padding(.leading,25)和padding(.trailing,25)替换为padding(.horizontal,24)，统一设置左右边距为24。
• 进度条宽度适配：
  • 背景进度条仅设置高度，宽度默认占满父容器（与上方文本HStack同宽）。
  • 前景进度条使用scaleEffect(x: CGFloat(bar), anchor: .leading)按比例缩放，替代原有的固定宽度计算，确保进度条末端与右侧数字文本精准对齐。
• 对齐逻辑优化：右侧数字文本通过Spacer()推至HStack最右端，进度条占满VStack宽度后，自然与文本右端对齐，满足需求中的视觉效果。

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