均匀对齐 swiftUI 堆栈中的项目

Question

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

对于熟悉 css 的人来说，所需的行为等于 css3 property display: flex; justify-content: space-between;。

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)
            ])
        }
    }
}