Как сохранить текст в качестве ведущего выравнивания после установки Text (). Frame (maxWidth: .infinity)

Question

Это может быть простой случай, но я не смог найти решение.

Вот мой код , использующий GeometryReader для установки относительной компоновки размера представления SwiftUI, такого как Image , Проблема в последнем VStack, я хочу фон текста go справа от VStack. Таким образом, я установил его как Text("Haibo: asdasd").frame(maxWidth: .infinity), но после этого я обнаружил, что текст стал горизонтальным по центру и не следовал выравниванию VStack: .leading.

import SwiftUI

struct ContentView: View {
    var body: some View {

        GeometryReader { geo in
            HStack(alignment: .top, spacing: 12) {
                Image("Alan shore").resizable().frame(width: geo.size.width / 6, height: geo.size.width / 6).cornerRadius(4)

                VStack(alignment: .leading, spacing: 10) {

                   // name
                   Text("Haibo")
                   // content
                   Text("Think ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink ThinkThink Think")
                   // 九宫格
                   VStack(spacing: 6) {

                       HStack(spacing: 6) {
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                       }
                       HStack(spacing: 6) {
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                       }
                       HStack(spacing: 6) {
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                           Image("Little girl").resizable().frame(width: geo.size.width / 4.7, height: geo.size.width / 4.7)
                       }
                   }

                   // Time, Action
                   HStack {
                       Text("5 hour ago")
                       Spacer()
                       Image("moment-action")
                   }

                   // Comment
                   VStack(alignment: .leading) {
                       Text("Haibo: asdasd").frame(maxWidth: .infinity)
                       Text("Jobs: WDC WDC WDC WDCWWWWW")
                   } //.padding(.init(top: 6, leading: 6, bottom: 6, trailing: 12))
                       .background(Color.yellow)
                   .cornerRadius(3)
                }
            } .padding(.init(top: 12, leading: 12, bottom: 12, trailing: 30))
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Что ж, пожалуйста, посмотрите на скриншот для лучшего понимания, Text("Haibo: asdasd") центрирован в желтой области. Как можно было сохранить ведущее выравнивание?

Answer 1

Это довольно запутанный аспект SwiftUI. Выравнивание VStack определяет, как его элементы выравниваются внутри фрейма VStack, а выравнивание Text.frame определяет, как будет выравниваться текст внутри Text.frame.

Я считаю полезным добавить некоторые границы, поскольку я ' m отладка:

VStack(alignment: .leading) {
    Text("Haibo: asdasd")
        .frame(maxWidth: .infinity)
        .border(Color.red , width: 2.0)
    Text("Jobs: WDC WDC WDC WDCWWWWW")
        .border(Color.green , width: 2.0)
}

Теперь вы можете видеть, что текст с maxWidth: .infinity имеет рамку, которая охватывает всю ширину VStack Рамка. Текстовый фрейм имеет выравнивание по началу, но текст по умолчанию выровнен по центру.

Здесь стоит упомянуть, что текст "jobs ..." также выровнен по центру к текстовому фрейму. , но это не очевидно, потому что размер рамки соответствует только тексту, тогда текстовый фрейм выравнивается по началу в пределах рамки VStack.

Теперь попробуйте это:

VStack(alignment: .leading) {
    Text("Haibo: asdasd")
        .frame(maxWidth: .infinity, alignment: .leading)
        .border(Color.red , width: 2.0)
    Text("Jobs: WDC WDC WDC WDCWWWWW")
        .border(Color.green , width: 2.0)
}

Текстовый фрейм по-прежнему является полной шириной фрейма VStack, но текст теперь выровнен, начиная с текстового фрейма.

Вот фрагмент без границ :

VStack(alignment: .leading) {
    Text("Haibo: asdasd")
        .frame(maxWidth: .infinity, alignment: .leading)
    Text("Jobs: WDC WDC WDC WDCWWWWW")
}

Вот статья, которую я нашел полезной для того, чтобы разобраться, как работает выравнивание:

Руководства по выравниванию в SwiftUI

Answer 2

Вы должны добавить .leading выравнивание к его кадру, как

 VStack(alignment: .leading) {
           Text("Haibo: asdasd").frame(maxWidth: .infinity, alignment: .leading)
           Text("Jobs: WDC WDC WDC WDCWWWWW")
       }