Похоже, это сработает:

extension HorizontalAlignment {
    private enum MyAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> Length {
            context[.trailing]
        }
    }
    static let myAlignmentGuide = HorizontalAlignment(MyAlignment.self)
}

struct ContentView : View {
    @State var username: String = ""
    @State var email: String = ""
    @State var password: String = ""

    var body: some View {
        VStack(alignment: .myAlignmentGuide) {
            HStack {
                Text("Username").alignmentGuide(.myAlignmentGuide, computeValue: { d in d[.trailing] })
                TextField($username)
                    .textFieldStyle(.roundedBorder)
                    .frame(maxWidth: 200)
            }
            HStack {
                Text("Email")
                    .alignmentGuide(.myAlignmentGuide, computeValue: { d in d[.trailing] })
                TextField($email)
                    .textFieldStyle(.roundedBorder)
                    .frame(maxWidth: 200)
            }
            HStack {
                Text("Password")
                    .alignmentGuide(.myAlignmentGuide, computeValue: { d in d[.trailing] })
                TextField($password)
                    .textFieldStyle(.roundedBorder)
                    .frame(maxWidth: 200)
            }
        }
    }
}

С помощью этого кода я могу добиться такого макета:

Предостережение здесь заключается в том, что я должен был указать максимальную ширину для TextFields. Оставленная без ограничений, система компоновки, описанная в выступлении на WWDC, ссылку на которое я дал в комментариях, извлекает размер для TextFieldпрежний для выравнивания, в результате чего TextField для электронной почты выходит за пределы двух других. Я не уверен, как решить эту проблему таким образом, чтобы позволить TextField расширяться до размера содержащего представления, не переходя...

    var body: some View {

    VStack {
        HStack {
            Text("Username")
            Spacer()
            TextField($username)
                .textFieldStyle(.roundedBorder)
                .frame(maxWidth: 200)
                .foregroundColor(.gray)
                .accentColor(.red)
        }
        .padding(.horizontal, 20)
        HStack {
            Text("Email")
            Spacer()
            TextField($email)
                .textFieldStyle(.roundedBorder)
                .frame(maxWidth: 200)
                .foregroundColor(.gray)
            }
            .padding(.horizontal, 20)
        HStack {
            Text("Password")
            Spacer()
            TextField($password)
                .textFieldStyle(.roundedBorder)
                .frame(maxWidth: 200)
                .foregroundColor(.gray)
            }
            .padding(.horizontal, 20)
    }
}

Вы можете использовать хак для чтения геометрииконтики для этого:

struct Column: View {
    @State private var height: CGFloat = 0
    @State var text = ""
    let spacing: CGFloat = 8

    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: spacing) {
                Group {
                    Text("Hello world")
                    Text("Hello Two")
                    Text("Hello Three")
                }.frame(height: height)
            }.fixedSize(horizontal: true, vertical: false)
            VStack(spacing: spacing) {
                TextField("label", text: $text).bindHeight(to: $height)
                TextField("label 2", text: $text)
                TextField("label 3", text: $text)
            }.textFieldStyle(RoundedBorderTextFieldStyle())
        }.fixedSize().padding()
    }
}

extension View {
    func bindHeight(to binding: Binding<CGFloat>) -> some View {
        func spacer(with geometry: GeometryProxy) -> some View {
            DispatchQueue.main.async { binding.value = geometry.size.height }
            return Spacer()
        }
        return background(GeometryReader(content: spacer))
    }
}

Здесь мы только считываем высоту первого TextField и применяем ее три раза к трем разным Text View, предполагая, что все TextField имеют одинаковую высоту. Если ваши три текстовых поля имеют разную высоту или имеют появляющиеся/исчезающие метки проверки, которые влияют на отдельные высоты, вы можете использовать тот же метод, но вместо этого с тремя разными привязками высоты.

Почему это немного взломано?

Поскольку это решение всегда будет сначала отображать текстовые поля без меток. Во время этой фазы рендеринга он установит высоту текстовых меток и вызовет другой рендеринг. Было бы более идеально рендерить все на одном этапе макета.

я не эксперт здесь, но мне удалось добиться желаемого макета, (1) выбрав альтернативу 2-VStacks-in-a-HStack, (2) обрамив внешние метки, (3) освободив их от ограничения вертикального расширения по умолчанию. назначая их maxHeight = .infinity и (4) фиксируя высоту HStack

struct ContentView: View {
    @State var text = ""
    let labels = ["Username", "Email", "Password"]

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                ForEach(labels, id: \.self) { label in
                    Text(label)
                        .frame(maxHeight: .infinity)
                        .padding(.bottom, 4)
                }
            }

            VStack {
                ForEach(labels, id: \.self) { label in
                    TextField(label, text: self.$text)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
            }
            .padding(.leading)
        }
        .padding(.horizontal)
        .fixedSize(horizontal: false, vertical: true)
    }
}

Вот результат превью:

чтобы учесть смещение базовых линий внешних и внутренних меток (сопутствующая проблема, не связанная с этим конкретным макетом — см., например, это обсуждение), я вручную добавил отступы

спасибо этот сайт за то, что просветил меня на пути к пониманию Хитрости макета SwiftUI

Вам нужно добавить фиксированную ширину и выравнивание по интерлиньяжу. Я тестировал в Xcode 11.1, все в порядке.

struct TextInputWithLabelDemo: View {
    @State var text = ""
    let labels = ["Username", "Email", "Password"]

    var body: some View {
        VStack {
            ForEach(labels, id: \.self) { label in
                HStack {
                    Text(label).frame(width: 100, alignment: .leading)
                    TextField(label, text: self.$text)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                }
            }
            .padding(.horizontal)
            .fixedSize(horizontal: false, vertical: true)
        }
    }
}

Ниже вы можете увидеть, в чем проблема, когда мы используем разные VStack для Text и TextField. См. дополнительную информацию здесь

Обновлено 16 октября 2019 г.

При ближайшем рассмотрении Texts и TextFields вы можете заметить, что они имеют разную высоту, и это влияет на положение Texts относительно TextFields, как вы можете видеть в правой части скриншота, что Password Text выше относительно Password TextField, чем Username Text относительно Username TextField. Я дал три способа решения этой проблемы здесь

    HStack{
        Image(model.image)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 10, alignment: .leading)
        VStack(alignment: .leading) {
            Text("Second column ")
            Text("Second column -")
        }
        Spacer()
        Text("3rd column")
    }

1- первый столбец - изображение

2- вторая колонка - два текста

3- плавающее значение

Spacer () — поиграйте с Spacer () -> пример выше, и vstack остается вместе с выравниванием по вертикали для всех строк, просто поместите разделитель для представлений, которые вы хотите сделать, в другом вертикальном выравнивании / столбце. VStack(alignment: .leading. — это важно, чтобы выравнивание начиналось