swift - 如何将 VStack 的中心对齐到一个点 SwiftUI

Question

我有 5VStacks个HStack跨越屏幕的宽度。VStack包含所有不同宽度的Text视图，因为它们显示不同的文本。我想要做的是对齐每个的中心VStack，使它们彼此和屏幕边缘均匀分开。我知道屏幕的宽度（我用过GeometryReader），我很确定要获得每个的 x 值，VStack我需要将屏幕的宽度除以 6，并且每个的中心VStack应该落在屏幕的宽度上除以 6，然后乘以表示其在 中的位置的数字HStack（因此VStack顶部的第一个HStack为 1）。由于所有的VStacks有不同的宽度我不认为我可以使用中的spacing参数HStack来实现这一点。因此，我需要一种方法来平均对齐每个的中心，VStack以便它们每个与屏幕边缘之间有一个均匀的空间。

这是我的代码：

HStack() {
        VStack(spacing: 10){
            Text("123")
                .foregroundColor(Color.white)
            Text("Value 1")
                .foregroundColor(Color.gray)
        }
        

        VStack(spacing: 10){
            Text("6534675")
                .foregroundColor(Color.white)
            Text("Value 23")
                .foregroundColor(Color.gray)
        }
        
        VStack(spacing: 10){
            Text("6534")
                .foregroundColor(Color.white)
            Text("Value 203")
                .foregroundColor(Color.gray)
        }
        
        VStack(spacing: 10){
            Text("1055")
                .foregroundColor(Color.white)
            Text("Value 4589")
                .foregroundColor(Color.gray)
        }
        
        VStack(spacing: 10){
            Text("4")
                .foregroundColor(Color.white)
            Text("Value 5")
                .foregroundColor(Color.gray)
        }
        
    }.frame(width: geo.size.width)

Answer 1

可以使用 .position() 定位视图的中心。

详细文档： https ://developer.apple.com/documentation/swiftui/vstack-view-modifiers

Answer 2

如果您知道 VStack 的宽度，则可以使用 .padding()

语法示例：

VStack(spacing: 10){
        Text("4")
            .foregroundColor(Color.white)
        Text("Value 5")
            .foregroundColor(Color.gray)
    }.padding(10)