SwiftUI LazyVGrid自适应布局问题：子视图宽度无法自适应

要实现一个尽可能填充水平空间、垂直方向自动扩展的网格布局，使用LazyVGrid搭配GridItem(.adaptive(minimum: 40))方案时，所有子视图宽度被固定为40，导致长文本（如“1123”）被迫拆分为多行显示，无法以单行完整展示。

问题表现：

• 实际效果：“1123”文本被拆分为两行，网格子项宽度统一为40
• 期望效果：“1123”文本单行完整展示，子项宽度自适应内容同时填充水平空间

代码示例：

import SwiftUI

struct NumbersViewTest: View {
    var numbersAndOperators: [String] {
        ["+", "-", "*", "/", "1123", "2", "3", "4", "5", "6", "7", "8", "9", "0"] 
    }

    var gridItems: [GridItem] {
        [GridItem(.adaptive(minimum: 40, maximum: .infinity))]
    }

    var body: some View {
        LazyVGrid(columns: gridItems) {
            ForEach(numbersAndOperators, id: \.self) { text in
                ZStack {
                    Rectangle().stroke()
                    Text(text)
                        .font(.largeTitle)
                }
            }
        }
        .padding()
    }
}

struct NumbersViewTest_Previews: PreviewProvider {
    static var previews: some View {
        NumbersViewTest()
    }
}

核心原因 #

GridItem(.adaptive(minimum: 40))会根据容器宽度自动生成列数，当容器足够宽时，列数会增加到每列刚好等于最小宽度40，导致子视图被限制在40宽度内，文本因超出宽度换行。

方案1：最简修复——让文本填充列空间 #

给Text添加frame(maxWidth: .infinity)，让文本优先填充所在列的可用宽度，避免换行：

ForEach(numbersAndOperators, id: \.self) { text in
    ZStack {
        Rectangle().stroke()
        Text(text)
            .font(.largeTitle)
            .frame(maxWidth: .infinity, alignment: .center) // 填充列宽度，居中显示
    }
}

此方案保留LazyVGrid的自适应列数特性，同时解决文本换行问题。

方案2：动态计算列宽——兼顾内容自适应 #

如果需要子项宽度先匹配内容，再填充列空间，可结合GeometryReader动态计算列数，确保每列宽度能容纳最长文本：

struct NumbersViewTest: View {
    var numbersAndOperators: [String] {
        ["+", "-", "*", "/", "1123", "2", "3", "4", "5", "6", "7", "8", "9", "0"] 
    }

    // 计算文本的最小宽度
    private func textWidth(for text: String, font: Font) -> CGFloat {
        let textView = UITextView()
        textView.font = UIFont(font)
        textView.text = text
        return textView.intrinsicContentSize.width
    }

    var body: some View {
        GeometryReader { geometry in
            let containerWidth = geometry.size.width
            let minColumnWidth = numbersAndOperators.map { textWidth(for: $0, font: .largeTitle) }.max() ?? 40
            let columnCount = max(1, Int(containerWidth / minColumnWidth))
            let columnWidth = containerWidth / CGFloat(columnCount)
            
            LazyVGrid(columns: Array(repeating: GridItem(.fixed(columnWidth)), count: columnCount)) {
                ForEach(numbersAndOperators, id: \.self) { text in
                    ZStack {
                        Rectangle().stroke()
                        Text(text)
                            .font(.largeTitle)
                    }
                }
            }
        }
        .padding()
    }
}

此方案会根据最长文本的宽度计算列数，确保所有文本都能单行展示，同时最大化填充水平空间。

方案3：固定列数+弹性宽度 #

如果不需要动态列数，可直接固定列数并使用.flexible列类型，让列宽度自适应填充空间：

var gridItems: [GridItem] {
    Array(repeating: GridItem(.flexible(minimum: 40)), count: 4) // 固定4列，可按需调整
}

此方案简单直接，但列数固定，缺乏动态适配性。

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