swiftui - 均匀对齐 swiftUI 中的项目

Question

swiftUI Stack 中的项目如何均匀对齐以填满所有可用空间？第一项和最后一项应该直接位于父级 Stack 框架的开头/结尾，如下所示:

对于熟悉 css 的人来说，所需的行为等同于 css3 属性 display: flex;证明内容:空格；。

Answer 1

这是一个可能的方法演示。使用 Xcode 12/iOS 14 准备和测试。

struct ItemView: View {
    let value: Int
    var body: some View {
        Text("Item\(value)")
            .padding()
            .background(Color.blue)
    }
}

struct JustifiedContainer<V: View>: View {
    let views: [V]
    
    init(_ views: V...) {
        self.views = views
    }

    init(_ views: [V]) {
        self.views = views
    }
    
    var body: some View {
        HStack {
            ForEach(views.indices, id: \.self) { i in
                views[i]
                if views.count > 1 && i < views.count - 1 {
                    Spacer()
                }
            }
        }
    }
}

struct Demo_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            JustifiedContainer(
                    ItemView(value: 1),
                    ItemView(value: 2),
                    ItemView(value: 3)
            )
            JustifiedContainer([
                    ItemView(value: 1),
                    ItemView(value: 2),
                    ItemView(value: 3),
                    ItemView(value: 4)
            ])
        }
    }
}