简体   繁体   中英

How to align the center of a VStack to a point SwiftUI

I have 5 VStacks in an HStack that spans the width of the screen. The VStack contains Text Views that are all different widths because they display different text. What I want to do is align the center of each VStack so that they are evenly apart from each other and the edges of the screen. I know the width of the screen (I used GeometryReader ) and I am pretty sure that to get the x value of each VStack I need to divide the width of the screen by 6, and that the center of each VStack should fall on the width of the screen divided by 6 and then multiplied by the number that represents its position in the HStack (so the first VStack at the top of the HStack would be 1). Since all of the VStacks have different widths I don't think I can use the spacing argument in the HStack to accomplish this. Thus I need a way to align the center of each VStack equally so that there is an even space between each of them and the edge of the screen.

Here is my code:

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)

If you know the width of the VStacks, you can work with.padding()

Syntax Example:

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

Can use.position() to position the center of the view.

Detailed Documentation: https://developer.apple.com/documentation/swiftui/vstack-view-modifiers

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM