i'm making an app and i have a problem, my interface (buttons, image etc.) placed in the center of the screen. and i want to place them at the top. Here is the code

    var body: some View {
        VStack{
            HStack{
                Button {
                    
                } label: {
                    Image(systemName: "pencil")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 45, height: 45)
                        .clipShape(Circle())
                }
                .hLeading()
                Button {
                    
                } label: {
                    Image(systemName: "calendar")
                        .font(.title2)
                        .foregroundColor(.white)
                }
                Button {
                    
                } label: {
                    Image(systemName: "bell")
                        .font(.title2)
                        .foregroundColor(.white)
                }
            }
            .padding()
        }
        .vTop()
        .hCenter()
        .background(Color("BG"))
        .preferredColorScheme(.dark)
    }

Can anybody help me?

CodePudding user response：

add Spacer() in your VStack like this:

    var body: some View {
    VStack{
        HStack{
            Button {
                
            } label: {
                Image(systemName: "pencil")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 45, height: 45)
                    .clipShape(Circle())
            }
            .hLeading()
            Button {
                
            } label: {
                Image(systemName: "calendar")
                    .font(.title2)
                    .foregroundColor(.white)
            }
            Button {
                
            } label: {
                Image(systemName: "bell")
                    .font(.title2)
                    .foregroundColor(.white)
            }
        }
        .padding()

        Spacer()  // <- this
    }
    .vTop()
    .hCenter()
    .background(Color("BG"))
    .preferredColorScheme(.dark)

    
}