如何在 SwiftUI 中调整 navigationBarTitle 和 Label Text 对齐方式答案

【问题标题】：How to adjust navigationBarTitle and Label Text alignment in SwiftUI如何在 SwiftUI 中调整 navigationBarTitle 和 Label Text 对齐方式
【发布时间】：2020-12-08 04:41:19
【问题描述】：

我刚学了 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

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

【问题讨论】：

标签： ios swiftui swiftui-navigationview

【解决方案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)

}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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()
        }

【讨论】：