英文:
SwiftUI - Adding title between navigation bar button items on a modal
问题
以下是翻译好的部分:
我有一个视图,我将其呈现为模态视图。在这个视图中,我希望在左上角有一个按钮,在右上角有另一个按钮,以及在这两个按钮之间水平居中的文本。我能够使用“navigationBarItems”正确放置按钮,但它不允许我添加文本。
仅放置按钮的代码,但我无法添加文本:
import SwiftUI
struct BookingModal: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView() {
VStack {
Text("Hello World")
}
.navigationBarItems(leading: Button("Cancel", action: {presentationMode.wrappedValue.dismiss()}), trailing: Button("Done", action: { }))
}
}
}
我尝试的方法: 我尝试用以下代码替换“navigationBarItems”中的内容:
.navigationBarItems(leading: HStack { Button("Cancel", action: {}); Spacer(); Text("Booking"); Spacer(); Button("Done", action: {})}.frame(width: .infinity))
然而,使用这些代码,所有元素都显示在左边,主要是因为"leading"。
如何才能实现使标题文本在导航栏按钮之间水平居中显示?
英文:
I have a view which I present as a modal view. In this view, I wish to have a button on the top left, another button on the top right and a text horizontally centered between both the buttons. I was able to place the buttons correctly using "navigationBarItems", but it doesn't allow me to add a text.
Code which just places the buttons correctly, however I am not able to add the text:
import SwiftUI
struct BookingModal: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView() {
VStack {
Text("Hello World")
}
.navigationBarItems(leading: Button("Cancel", action: {presentationMode.wrappedValue.dismiss()}), trailing: Button("Done", action: { }))
}
}
}
struct BookingModal_Previews: PreviewProvider {
static var previews: some View {
BookingModal()
}
}
What I attempted: I tried replacing code within "navigationBarItems" with the below:
.navigationBarItems(leading: HStack { Button("Cancel", action: {}); Spacer(); Text("Booking"); Spacer(); Button("Done", action: {})}.frame(width: .infinity))
However with these, all the elements show up on the left, mostly because of leading.
How can I achieve showing the title text horizontally centered between both navigation bar buttons?
答案1
得分: 1
你需要使用 navigationTitle
和 navigationBarTitleDisplayMode
。将 navigationBarTitleDisplayMode
设置为 inline
。
struct BookingModal: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView() {
VStack {
Text("Hello World")
}
.navigationBarItems(leading: Button("Cancel", action: {presentationMode.wrappedValue.dismiss()}), trailing: Button("Done", action: { }))
.navigationTitle("Booking")
.navigationBarTitleDisplayMode(.inline)
}
}
}
英文:
You have to use navigationTitle
and navigationBarTitleDisplayMode
. set navigationBarTitleDisplayMode
to inline
struct BookingModal: View {
@Environment(\.presentationMode) var presentationMode
var body: some View {
NavigationView() {
VStack {
Text("Hello World")
}
.navigationBarItems(leading: Button("Cancel", action: {presentationMode.wrappedValue.dismiss()}), trailing: Button("Done", action: { }))
.navigationTitle("Booking")
.navigationBarTitleDisplayMode(.inline)
}
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论