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

Posted

技术标签:

【中文标题】如何在 SwiftUI 中调整 navigationBarTitle 和 Label Text 对齐方式【英文标题】:How to adjust navigationBarTitle and Label Text alignment in SwiftUI 【发布时间】: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

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

【问题讨论】:

【参考方案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()
        

【讨论】:

以上是关于如何在 SwiftUI 中调整 navigationBarTitle 和 Label Text 对齐方式的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI 如何调整不同的屏幕尺寸

SwiftUI NavigationLink 立即导航回来

SwiftUI:如何调整 UIViewRepresentable 输出的大小?

如何在 SwiftUI 中动态调整可垂直滚动的 VStack 中的一行中的项目数?

带有 SidebarListStyle 的 SwiftUI 列表没有圆角?

如何调整我的视图模型以实现依赖注入 swiftui(用于以后的单元测试)