Как добавить новую строку текста с помощью Swift UI

Question

Я пытаюсь, чтобы текст (CEO) отображался непосредственно под именем. Когда я добавляю это, это полностью внизу

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
            Spacer(minLength: 35.0)
            Image("employeeID")
                .clipShape(Circle())
                .shadow(radius: 10.0)
                .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
            }
            .padding(.bottom, 50.0)
            .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
                .edgesIgnoringSafeArea(.all)
            VStack {
                ZStack (alignment: .top) {
                    Color.white
                    HStack {
                        Text("Jobs")
                        .fontWeight(.heavy)
                        .multilineTextAlignment(.center)
                        .padding(.top, 20.0)
                        .font(.largeTitle)
                        Text("Steve")
                            .fontWeight(.light)
                        .multilineTextAlignment(.center)
                        .padding(.top, 20.0)
                        .font(/*@START_MENU_TOKEN@*/.largeTitle/*@END_MENU_TOKEN@*/)
                    }
                }
                Text("CEO")
            }
        }

    }
}

Answer 1

Просто оберните их в собственный VStack, как показано ниже

...
VStack {
    HStack {
        Text("Jobs")
        .fontWeight(.heavy)
        .multilineTextAlignment(.center)
        .font(.largeTitle)
        Text("Steve")
            .fontWeight(.light)
        .multilineTextAlignment(.center)
        .font(/*@START_MENU_TOKEN@*/.largeTitle/*@END_MENU_TOKEN@*/)
    }
    Text("CEO") // << right below name
}
.padding(.top, 20.0) // << padding entire container
...

Answer 2

ZStack - это жадный View, что означает, что он занимает все пространство, которое ему дается, и поэтому толкает Text("CEO") к нижней части экрана.

Вы должны поместить VStack внутри вашего ZStack. Он будет содержать HStack, который у вас уже есть, Text("CEO") и добавить Spacer() (еще один жадный View), чтобы убедиться, что все Text сдвинуты к изображению. Ваш ZStack должен выглядеть так:

ZStack (alignment: .top) {
    Color.white
    VStack {
        HStack {
            Text("Jobs")
                .fontWeight(.heavy)
                .multilineTextAlignment(.center)
                .font(.largeTitle)
            Text("Steve")
                .fontWeight(.light)
                .multilineTextAlignment(.center)
                .font(.largeTitle)
        }   .padding(.top, 20.0)
        Text("CEO")
            .padding(.top, 60.0)
        Spacer()
   }

}

Answer 3

Вот мое решение, но я не думаю, что мне нужно добавлять отступы к верху

struct ContentView: View {
    var body: some View {
        VStack {
            VStack {
            Spacer(minLength: 35.0)
            Image("employeeID")
                .clipShape(Circle())
                .shadow(radius: 10.0)
                .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
            }
            .padding(.bottom, 50.0)
            .background(/*@START_MENU_TOKEN@*/Color.red/*@END_MENU_TOKEN@*/)
                .edgesIgnoringSafeArea(.all)
            VStack {
                ZStack (alignment: .top) {
                    Color.white
                    HStack {
                        Text("Jobs")
                        .fontWeight(.heavy)
                        .multilineTextAlignment(.center)
                        .font(.largeTitle)
                        Text("Steve")
                            .fontWeight(.light)
                        .multilineTextAlignment(.center)
                        .font(/*@START_MENU_TOKEN@*/.largeTitle/*@END_MENU_TOKEN@*/)
                    }
                    .padding(.top, 20.0)
                    Text("CEO")
                        .padding(.top, 60.0)
                }
            }
        }

    }
}

Это похоже на взлом, а не на элегантное решение.