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

Question

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

请参阅下面所附的代码：

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

                }

Answer 1

您可以设置左视图和右视图以填充尽可能多的宽度。这将使它们均匀地分配空间，不包括中间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以显示空间的占用方式：

当你有多个这样的东西时，它会是什么样子：

Answer 2

这是进行此类工作的一种方法，带有覆盖：

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