SwiftUI – 在模态窗口的导航栏按钮项之间添加标题

huangapple go评论58阅读模式
英文:

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

SwiftUI – 在模态窗口的导航栏按钮项之间添加标题

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.

SwiftUI – 在模态窗口的导航栏按钮项之间添加标题

How can I achieve showing the title text horizontally centered between both navigation bar buttons?

答案1

得分: 1

你需要使用 navigationTitlenavigationBarTitleDisplayMode。将 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)

           }
       }
}

huangapple
  • 本文由 发表于 2023年3月1日 10:33:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75599083.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定