SwiftUI中为HStack子元素设置特定宽度比例的最简方案

方案一：HStack + 布局优先级（最接近weight参数的轻量方案） #

给子视图设置maxWidth: .infinity抢占可用空间，再通过layoutPriority的数值比控制宽度比例，完全不受文本长度影响：

HStack(spacing: 8) {
    Text("Text1")
        .frame(maxWidth: .infinity)
        .layoutPriority(1)
        .background(Color.yellow)
    
    Text("Text2很长很长很长")
        .frame(maxWidth: .infinity)
        .layoutPriority(2)
        .background(Color.green)
    
    Text("Text3")
        .frame(maxWidth: .infinity)
        .layoutPriority(1)
        .background(Color.blue)
}

这里layoutPriority的数值比就是宽度比例（1:2:1），所有子视图都会按比例分配HStack的总宽度。

方案二：Grid 布局（iOS 16+ 推荐） #

Grid原生支持通过列配置设置宽度比例，逻辑更直观：

iOS 16+ 基础写法 #

Grid(alignment: .leading, horizontalSpacing: 8) {
    GridRow {
        Text("Text1")
            .background(Color.yellow)
        Text("Text2很长很长很长")
            .background(Color.green)
        Text("Text3")
            .background(Color.blue)
    }
}
.gridColumns([
    GridColumn(.flexible(), spacing: 8),
    GridColumn(.flexible(minimum: 0), spacing: 8), // 权重默认1，这里通过重复逻辑实现2倍宽度？不，实际.flexible()的权重是1，要2倍的话iOS17+用weight参数
    GridColumn(.flexible(), spacing: 8)
])

iOS 17+ 更精准的权重写法 #

直接给GridColumn指定weight参数，比例设置更直接：

Grid(alignment: .leading, horizontalSpacing: 8) {
    GridRow {
        Text("Text1").background(Color.yellow)
        Text("Text2很长很长很长").background(Color.green)
        Text("Text3").background(Color.blue)
    }
}
.gridColumns([
    GridColumn(.flexible(weight: 1)),
    GridColumn(.flexible(weight: 2)),
    GridColumn(.flexible(weight: 1))
])

方案三：自定义Modifier 复用比例逻辑 #

如果需要多处复用该逻辑，可以封装成ViewModifier简化代码：

struct WidthRatioModifier: ViewModifier {
    let ratio: CGFloat
    
    func body(content: Content) -> some View {
        content
            .frame(maxWidth: .infinity)
            .layoutPriority(ratio)
    }
}

extension View {
    func widthRatio(_ ratio: CGFloat) -> some View {
        self.modifier(WidthRatioModifier(ratio: ratio))
    }
}

// 使用示例
HStack(spacing: 8) {
    Text("Text1")
        .widthRatio(1)
        .background(Color.yellow)
    
    Text("Text2很长很长很长")
        .widthRatio(2)
        .background(Color.green)
    
    Text("Text3")
        .widthRatio(1)
        .background(Color.blue)
}

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