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

                }

- mdav132

Answer 1

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

要实现这一点，您需要将maxWidth设置为.infinity，然后将它们对准正确的侧面。

您曾尝试使用Spacer()，这会使得所有的Spacer具有相等的宽度。然而，这种解决方案会使得这些视图具有相等的宽度。

例如：

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中的每个元素添加边框以显示占用的空间：

当你拥有多个这些时，它是什么样子的：

- George

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

- ios coder

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

- workingdog support Ukraine