ios - 如何在 SwiftUI 中调整 navigationBarTitle 和 Label Text 对齐方式

Question

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

图1：我想让我的观点像这样

我试图像下面那样做，但它不起作用：

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")
    }
  }
}

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

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

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

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

删除.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()
        }

Answer 3

您应该将对齐添加到 StackView。您可以将对齐方式更改为.leading、.trailing或.center。默认情况下它是居中的，这就是为什么你将标签放在中心。

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