SwiftUI中如何让Image占HStack容器宽度的一半？

方案一：GeometryReader精准控制宽度 #

通过GeometryReader获取父容器的宽度，直接给两个子视图设置一半宽度，同时处理图片溢出和对齐问题：

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                Image("landscape")
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width / 2, height: 170)
                    .clipped() // 防止图片超出容器
                
                VStack(alignment: .center, spacing: 8) {
                    Text("Test")
                    Text("Test 2")
                }
                .frame(width: geometry.size.width / 2, height: 170)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: 170)
        .background(Color.red)
        .padding()
    }
}

• 把HStack的spacing设为0，避免额外宽度占用
• 给Image加上clipped()，防止图片缩放后超出容器范围
• 给VStack设置固定高度，保证和Image同高，同时用alignment: .center让文字居中，解决视图被推到顶部的问题

方案二：用Grid布局简化实现（iOS 16+） #

Grid布局默认会自动均分列宽，代码更简洁：

struct ContentView: View {
    var body: some View {
        Grid(alignment: .center, horizontalSpacing: 0) {
            GridRow {
                Image("landscape")
                    .resizable()
                    .scaledToFill()
                    .frame(height: 170)
                    .clipped()
                
                VStack(alignment: .center, spacing: 8) {
                    Text("Test")
                    Text("Test 2")
                }
                .frame(height: 170)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: 170)
        .background(Color.red)
        .padding()
    }
}

• GridRow内的两个子视图会自动平分Grid的宽度，无需手动计算
• 同样设置horizontalSpacing: 0避免间距干扰布局

方案三：通过layoutPriority强制均分 #

给两个子视图设置相同的布局优先级，让它们平等抢占可用空间：

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {
            Image("landscape")
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: 170)
                .clipped()
                .layoutPriority(1)
            
            VStack(alignment: .center, spacing: 8) {
                Text("Test")
                Text("Test 2")
            }
            .frame(maxWidth: .infinity, maxHeight: 170)
            .layoutPriority(1)
        }
        .frame(maxWidth: .infinity, maxHeight: 170)
        .background(Color.red)
        .padding()
    }
}

• 默认HStack会根据子视图内容的固有宽度分配空间，设置相同的layoutPriority后，两个视图会均分可用宽度
• 配合maxWidth: .infinity让视图尽可能占满分配的空间

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