如何在 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:如何调整 UIViewRepresentable 输出的大小?
如何在 SwiftUI 中动态调整可垂直滚动的 VStack 中的一行中的项目数?