如何在 SwiftUI 中调整 navigationBarTitle 和 Label 文本对齐方式

Question

我刚学了swiftUI，没遇到什么麻烦。我想像这样使 navigationBarTitle 和标题标题对齐：

Image 1: I want to make my view like this

我试过像下面这样但它不起作用:

struct HeaderView: View {
var body: some View {
    NavigationView {
        VStack {
            Image("kante_training_champions_league")
                .resizable()
                .scaledToFill()
                .frame(width: 370, height: 150)
                .cornerRadius(10.0)
            Text("KANTE: NEW PLAYERS DON’T SEEM NEW")
                .font(.title)
                .fontWeight(.bold)
                .multilineTextAlignment(.leading)
                .frame(width: 370)
            Spacer()
        }
        .navigationBarTitle("Chelsea FC")
    }
  }
}

从我上面的代码中，我得到了这样的视图：

Image 2: I got a view like this from my code above

有人可以帮助我如何获得我想要的视图

Answer 1

尝试领先对齐

var body: some View {
    NavigationView {
        VStack(alignment: .leading) {     // << here !!

        // ... no changes in image

        Text("KANTE: NEW PLAYERS DON’T SEEM NEW")
            .font(.title)
            .fontWeight(.bold)
            .padding(.leading)                    // << here !!
            .multilineTextAlignment(.leading)

}

Answer 2

您应该向 StackView 添加对齐方式。您可以将对齐方式更改为 .leading、.trailing 或 .center。它默认居中，这就是为什么您将标签居中的原因。

var body: some View {
  NavigationView {
    VStack(alignment: .leading) {    
    // Your Code
    }
  }
}

Answer 3

删除 .frame(width: 370) 并使用 .frame(maxWidth: .infinity) 以便文本占据其父级的整个宽度。

        VStack {
            Image("kante_training_champions_league")
                .resizable()
                .scaledToFill()
                .frame(width: 370, height: 150)
                .cornerRadius(10.0)
            Text("KANTE: NEW PLAYERS DON’T SEEM NEW")
                .font(.title)
                .fontWeight(.bold)
                .multilineTextAlignment(.leading)
                .frame(maxWidth: .infinity)
            Spacer()
        }

如何在 SwiftUI 中调整 navigationBarTitle 和 Label 文本对齐方式

How to adjust navigationBarTitle and Label Text alignment in SwiftUI

ios

swiftui

swiftui-navigationview