如何在SwiftUI中实现FanDuel式体育博彩赔率行对齐效果

问题核心原因 #

你当前布局不对齐的根本原因是左侧球队信息区域没有设置统一的固定宽度，球队名称长度变化会直接挤压右侧按钮区域的位置，导致不同行的按钮无法对齐。

具体修改方案 #

• 给所有赔率行左侧的球队信息VStack统一设置固定宽度，对齐方式设置为左对齐，示例：

  VStack(spacing: 13) {
      // 两个球队的HStack内容保持不变
  }
  .padding([.top, .leading, .bottom])
  // 统一设置固定宽度，数值可根据你需要的展示效果调整
  .frame(width: 140, alignment: .leading)
  

• 给球队名称的Text添加单行限制，避免长队名撑开容器：

  Text("NY Islanders")
      .fontWeight(.bold)
      .font(.caption)
      .foregroundColor(.white)
      .lineLimit(1)
      // 可选配置：长队名自动缩小字号，最小缩到原大小的80%
      .minimumScaleFactor(0.8)
  

• 修正外层边框的布局错误：Rectangle的frame应该用maxWidth: .infinity而不是width: .infinity，后者属于非法用法会导致布局异常：

  Rectangle()
      .stroke(Color.black)
      .frame(maxWidth: .infinity, height: 125)
  

额外优化建议 #

你可以把重复的赔率按钮抽成自定义子View，减少冗余代码，后续修改样式也只需要改一处即可，示例：

struct OddsButton: View {
    let topText: String
    let bottomText: String?
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            VStack(spacing: 2) {
                Text(topText)
                    .foregroundColor(.black)
                    .fontWeight(.bold)
                    .font(.caption2)
                if let bottomText = bottomText {
                    Text(bottomText)
                        .foregroundColor(.black)
                        .fontWeight(.bold)
                        .font(.caption2)
                }
            }
        }
        .frame(width: 75, height: 45)
        .background(Color.white)
        .cornerRadius(3)
    }
}

使用的时候直接调用即可：

OddsButton(topText: "-1.5", bottomText: "-120", action: {})
OddsButton(topText: "-121", bottomText: nil, action: {})

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