SwiftUI 将 HStack 与不同大小的元素对齐答案

【问题标题】：SwiftUI Align HStack with different size elementsSwiftUI 将 HStack 与不同大小的元素对齐
【发布时间】：2021-10-27 19:32:27
【问题描述】：

我希望构建一个包含 3 个元素的 HStack，一个在左侧，一个在中间，一个在右侧。中间元素应该始终位于中心，但由于左右元素是动态的，因此可以是不同的长度，中间元素会根据侧面元素的大小被推动（见下图）。我正在使用垫片和填充物，但需要一些能够自动调整垫片大小的东西。有谁知道这样做的方法吗？

见下面附上的代码：

VStack(alignment: .leading){
                    Text(item.itemName)
                        .padding(1)
                        .padding(.horizontal, 20)
                    
                    HStack{
                        //Representative item code
                        Text("123454")
                            .padding(.horizontal, 20)
                        Spacer()
                        
                        Text(item.itemQuantity)
                            //.position(x: 100)

                        Spacer()
                        Text(item.itemPrice)
                            .padding(.horizontal, 20)
                    }

                }

【问题讨论】：

标签： swift swiftui

【解决方案1】：

这是做这种工作的一种方式，带有覆盖：

struct ContentView: View {
    
    var body: some View {
        
        ForEach(0...10, id:\.self) { index in
            
            VStack {
                
                HStack {
                    
                    Text("Item " + String(describing: index))
                        .bold()
                        .padding(1)
                        .padding(.horizontal, 20)
                    
                    Spacer()
                }
                
                HStack {
                    
                    Text(String(describing: Int.random(in: Int.min...Int.max)/100))
                        .lineLimit(1)
                        .padding(.horizontal, 20)
                    
                    Spacer()
                    
                    Text(String(describing: Int.random(in: Int.min...Int.max)/100))
                        .lineLimit(1)
                        .padding(.horizontal, 20)
                }
                .overlay(Text("1"))
                .overlay(Color.red.opacity(0.5).frame(width: 1, height: 500, alignment: .center)) //Testing!
                
                Divider()
                
            }
            
        }
        
    }
}

【讨论】：

【解决方案2】：

您可以将左右视图设置为尽可能多地填充宽度。这将使它们都平均分割空间，不包括中间的Text。

为此，您将maxWidth 设置为.infinity，然后将它们对齐到正确的一侧。

您尝试使用 Spacer()，这使得 Spacers 具有相等的宽度。但是，使用此解决方案，您可以使这些视图具有相等的宽度。

例子：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Puma Buckett Hat")

            HStack(spacing: 0) {
                Text("123454").frame(maxWidth: .infinity, alignment: .leading)

                Text("1")

                Text("35.99").frame(maxWidth: .infinity, alignment: .trailing)
            }
        }
        .padding()
    }
}

结果：

为HStack中的每个元素添加边框以显示空间是如何被占用的：

当你拥有多个这些时会是什么样子：

【讨论】：

【解决方案3】：

您可以尝试使用 LazyVGrid 代替您的 HStack，例如以下示例：

struct ContentView: View {
    var columns: [GridItem] = [GridItem(.flexible()),GridItem(.flexible()),GridItem(.flexible())]
    let items = ["1111","2","33333"]
    
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Puma Buckett Hat").padding(.horizontal, 20)
            List (items, id: \.self) { item in
                LazyVGrid(columns: columns, alignment: .leading, spacing: 6) {
                    Text(item)
                    Text(item+" more stuff")
                    Text(item)
                }
            }
        }
    }
}

【讨论】：