SwiftUI 如何让List行父视图自动拉伸适配子视图内容尺寸

数据老陈

2026-9-28

问题原因

布局异常的核心是GeometryReader的布局特性：GeometryReader本身没有固有内容尺寸，会尝试撑满父视图提供的所有可用空间；而List的行默认无法感知GeometryReader内部的内容大小，只会用默认行高渲染，最终导致内部文本内容溢出、相邻行重叠。

解决方案

不要用GeometryReader包裹整个行内容，而是把按比例填充的矩形作为背景层放在文本内容下方。这样行的高度会由文本内容自然撑开，背景层可以通过GeometryReader获取到已撑开的行尺寸来计算矩形宽度，无需手动指定固定行高。

修改后的ItemDetailsRowView代码如下：

struct ItemDetailsRowView: View {
    var itemDetails: ItemDetials
    
    var body: some View {
        // 主内容为文本VStack，会自动计算所需的宽高
        VStack(alignment: .leading) {
            Text(itemDetails.title)
                .font(.system(size: 20))
            Text(itemDetails.rowOne)
                .font(.system(size: 12))
                .foregroundColor(.gray)
            Text(itemDetails.rowTwo)
                .font(.system(size: 12))
                .foregroundColor(.gray)
        }
        // 撑满行的全部宽度，对齐方式保持左对齐
        .frame(maxWidth: .infinity, alignment: .leading)
        // 背景层放置按比例填充的进度矩形
        .background(
            GeometryReader { geometry in
                Rectangle()
                    .frame(width: geometry.size.width * itemDetails.stat/itemDetails.maxOfStat)
                    .opacity(0.3)
                    .foregroundColor(Color(itemDetails.color))
            }
        )
    }
}