SwiftUI实现单行标签紧凑排列：Grid可行还是用HStack？

我通过以下代码创建了一个SwiftUI视图结构体：

struct ElementsView: View {
    @State private var selectedElement: String = "First element"

    let data: [String] = [
        "First element",
        "Second Longer Element",
        "3 element",
        "Forth Element",
        "Fifth Longer element",
        "6 Element"
    ]

    let columns: [GridItem] = [
        GridItem(.adaptive(minimum: 100, maximum: 120), alignment: .leading)
    ]

    var body: some View {
        LazyVGrid(columns: columns, alignment: .leading, spacing: 8) {
            ForEach(data, id: \.self) { element in
                Button {
                    selectedElement = element
                } label: {
                    Text(element)
                        .font(.system(size: 16))
                        .multilineTextAlignment(.leading)
                        .padding(10)
                        .background {
                            if selectedElement == element {
                                Capsule()
                                    .foregroundColor(.blue)
                                    .background {
                                        Capsule()
                                            .stroke(lineWidth: 2)
                                            .foregroundColor(.black)
                                    }
                            } else {
                                Capsule()
                                    .foregroundColor(.white)
                            }
                        }
                }
                .buttonStyle(PlainButtonStyle())
            }
        }
        .padding()
    }
}

当前布局效果：

期望布局效果：

需求：行内各元素间间距最小，且每行尽可能容纳更多单行显示的元素。请问该需求能否通过Grid系统实现，还是需要使用多个HStack？

解答 #

核心结论 #

LazyVGrid无法直接实现这种内容自适应的流式布局。因为Grid系统的列宽规则（adaptive/flexible）是基于固定的最小/最大宽度分配空间，无法让每个单元格宽度完全匹配自身内容的实际宽度，所以达不到每行尽可能多容纳单行元素的效果。

可行实现方案 #

1. 使用第三方流式布局库（推荐）

最简洁的方式是用成熟的第三方库，比如FlowStacks。它的FlowHStack组件可以自动根据内容宽度换行，完美匹配需求：

import FlowStacks

struct ElementsView: View {
    @State private var selectedElement: String = "First element"

    let data: [String] = [
        "First element",
        "Second Longer Element",
        "3 element",
        "Forth Element",
        "Fifth Longer element",
        "6 Element"
    ]

    var body: some View {
        FlowHStack(spacing: 8) { // 控制行内元素间距
            ForEach(data, id: \.self) { element in
                Button {
                    selectedElement = element
                } label: {
                    Text(element)
                        .font(.system(size: 16))
                        .padding(10)
                        .background {
                            if selectedElement == element {
                                Capsule()
                                    .foregroundColor(.blue)
                                    .background {
                                        Capsule()
                                            .stroke(lineWidth: 2)
                                            .foregroundColor(.black)
                                    }
                            } else {
                                Capsule()
                                    .foregroundColor(.white)
                            }
                        }
                }
                .buttonStyle(PlainButtonStyle())
            }
        }
        .padding()
    }
}

2. 手动实现流式布局（无依赖）

如果不想引入第三方库，可以通过PreferenceKey收集每个元素的尺寸，再在父视图中计算每行能容纳的元素，最后用VStack包裹多个HStack实现。核心步骤：

• 定义SizePreferenceKey来收集每个元素的宽度
• 遍历数据，根据容器宽度和元素宽度分组，生成多行数据
• 用VStack渲染每组对应的HStack

这种方式代码量较大，但可以完全自定义布局逻辑，适合需要高度定制的场景。

3. 不推荐使用多个HStack硬编码

手动写多个HStack虽然能实现固定布局，但完全不具备动态性——数据变化时需要手动调整分组，维护成本极高，不建议采用。

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