Выравнивание VStack и HStack правильно

Question

Я не могу понять, как выровнять содержимое этого представления:

Я пробовал много разных подходов:

• Фиксированный размер vstack
• настройка макс. и минимальная ширина
• установка размера изображений и т. д.

Кажется, ничего не работает: (

import SwiftUI

struct Welcome: View {
    var body: some View {
        VStack {
            Text("Welcome to XXX")
                .font(.title).bold()

            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                    .imageScale(.large)
                    .padding()
                VStack(alignment: .leading) {
                    Text("Lorem ipsum dolor")
                        .font(.headline)
                    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore")
                        .font(.subheadline)
                        .foregroundColor(Color(.lightText))
                }
            }.padding()

            HStack {
                Image(systemName: "command")
                    .foregroundColor(Color(.systemOrange))
                    .imageScale(.large)
                    .padding()
                VStack(alignment: .leading) {
                    Text("Lorem ipsum dolor")
                        .font(.headline)
                    Text("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.")
                        .font(.subheadline)
                        .foregroundColor(Color(.lightText))
                }
            }.padding()

            HStack {
                Image(systemName: "cube")
                    .foregroundColor(Color(.systemOrange))
                    .imageScale(.large)
                    .padding()
                VStack(alignment: .leading) {
                    Text("At vero eos et accusamus")
                        .font(.headline)
                    Text("At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque ")
                        .font(.subheadline)
                        .foregroundColor(Color(.lightText))
                }
            }.padding()
                Button(action: {
                    print("skip")
                }) {
                    HStack {
                        Spacer()
                        Text("Skip")
                            .font(.subheadline)
                        Spacer()
                    }
                    .foregroundColor(Color(.systemOrange))
                }.padding(.top, 60)

                Button(action: {
                    print("continue")
                }) {
                    HStack {
                        Spacer()
                        Text("Sign In")
                            .font(.subheadline)
                        Spacer()
                    }
                    .padding(12)
                    .foregroundColor(Color(.label))
                    .background(Color(.systemOrange))
                    .cornerRadius(12)
                }.padding()
            }
    }
}

Довольно раздражает, что Рекомендации по интерфейсу для человекарекомендуем создавать экраны приветствия, подобные этому, и они не обеспечивают простое выполнение этого.

Answer 1

Добавление проставки, кажется, делает трюк:

            HStack {
                Image(systemName: "cube")
                    .foregroundColor(Color(.systemOrange))
                    .imageScale(.large)
                    .padding()
                VStack(alignment: .leading) {
                    Text("At vero eos et accusamus")
                        .font(.headline)
                    Text("At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque ")
                        .font(.subheadline)
                        .foregroundColor(Color(.lightText))
                }
                Spacer()
            }.padding()

Answer 2

Просто чтобы немного глубже разобраться в этом вопросе (пожалуйста, учтите, что ответ @ Mycroft правильный ): для того, чтобы пользовательский интерфейс показывался в вопросе, необходимо Spacer, это не так. по желанию. Я создал минимальный жизнеспособный пример, чтобы точно показать, что произойдет без представления Spacer:

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                VStack(alignment: .leading) {
                    Text("Sed ut perspiciatis unde omnis iste natus")
                }
            }
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                VStack(alignment: .leading) {
                    Text("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.")
                }
            }
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                VStack(alignment: .leading) {
                    Text("At vero eos ")
                }
            }
        }
    }
}

Результат:

Как видите, результат полностью смещен. Таким образом, вы должны добавить представление Spacer, чтобы получить желаемое выравнивание.

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                VStack(alignment: .leading) {
                    Text("Sed ut perspiciatis unde omnis iste natus")
                }
                Spacer()
            }
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                VStack(alignment: .leading) {
                    Text("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.")
                }
                Spacer()
            }
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(Color(.systemOrange))
                VStack(alignment: .leading) {
                    Text("At vero eos ")
                }
                Spacer()
            }
        }
    }
}

В макете выше у вас есть "две колонки ", левая с изображениями и правая с текстами. Если вы не укажете размер, система размещения разместит изображения, а затем предоставит оставшееся пространство для текстов. Но есть и другой вариант, если вам нужно указать конкретные размеры: если вам нужно, чтобы левый столбец изображения составлял, например, половину экрана, вы можете использовать GeometryReader:

struct ContentView: View {
    var body: some View {
        GeometryReader { g in
            VStack {
                HStack {
                    HStack {
                        Spacer()
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(Color(.systemOrange))
                    }
                    .frame(width: g.size.width/2.0)

                    VStack(alignment: .leading) {
                        Text("Sed ut perspiciatis unde omnis iste natus")
                    }
                    Spacer()
                }
                HStack {
                    HStack {
                        Spacer()
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(Color(.systemOrange))
                    }
                    .frame(width: g.size.width/2.0)

                    VStack(alignment: .leading) {
                        Text("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut ")
                    }
                    Spacer()
                }
                HStack {
                    HStack {
                        Spacer()
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(Color(.systemOrange))
                    }
                    .frame(width: g.size.width/2.0)
                    VStack(alignment: .leading) {
                        Text("At vero eos ")
                    }
                    Spacer()
                }
            }
        }
    }
}