FlowLayout 标签流

增删 chip 看 spring 动画自动 reflow 换行——Web 复刻用 Motion 的 layout prop，对应 SwiftUI 自定义 Layout 协议 + .animation。

ch. 11

调参

5 个 chip · 点击 chip 删除

对照 SwiftUI

// SwiftUI 16+ — 自定义 Layout 协议（FlowLayout 核心）
struct FlowLayout: Layout {
    var hSpacing: CGFloat = 8
    var vSpacing: CGFloat = 8

    func sizeThatFits(proposal: ProposedViewSize,
                      subviews: Subviews,
                      cache: inout Cache) -> CGSize {
        // 测量子项 → 按宽度换行 → 返回总尺寸
    }

    func placeSubviews(in bounds: CGRect,
                       proposal: ProposedViewSize,
                       subviews: Subviews,
                       cache: inout Cache) {
        // 把每个子项放到正确的 (x, y)
    }
}

FlowLayout(hSpacing: 8, vSpacing: 8) {
    ForEach(chips, id: \.self) { Chip(label: $0) }
}
.animation(.spring(duration: 0.45, bounce: 0.25), value: chips)

左侧是 Web 复刻（Motion / React），右侧是等价的 SwiftUI 写法。两边 spring 数学一致。