如何将 SwiftUI navigationBarTitle 居中对齐？

Question

如何在 SwiftUI 中将导航栏标题居中？

var body: some View {
    NavigationView {
        .navigationBarTitle("Todo Lists")
    }
}

Answer 1

.navigationBarTitle 允许三种显示模式 - .large、.inline 和 .automatic.

来自文档：

case automatic
Inherit the display mode from the previous navigation item.
case inline
Display the title within the standard bounds of the navigation bar.
case large
Display a large title within an expanded navigation bar.

因此，这取决于您说 "how does one centre a navigation bar title in SwiftUI?" 时的意思您不能将显示模式为 .large 的导航栏标题居中。您也不能 left-align 或 right-align 显示模式为 .inline 的导航栏标题。如果你想要一个居中的导航栏标题，那么你唯一的选择是使用 .inline.

var body: some View {
    NavigationView {
        CustomView()
            .navigationBarTitle("Todo Lists", displayMode: .inline)
    }
}

Answer 2

这是一个选项。使用 'navigationBarHidden(true)' 唯一的缺点是它会在图像和表格视图之间造成很大的差距。

struct ContentView: View{
var body: some View {
            VStack
            {
                CircleImageView()
                HeadLineView()
                NavigationView
                {
                        List
                        {
                            Text("Line 1")
                            Text("Line 2")
                        }
                        .navigationBarHidden(true)
                }
            }
        }
    }

struct HeadLineView : View
{
    var body: some View{
        Text("Headline").bold().font(Font(UIFont.systemFont(ofSize: 30.0)))
    }
}

Answer 3

您不能更改标题中的文本格式。但这里有一个解决方法，它将按要求工作（没有大的差距）：

HStack{
    Text("Todo Lists")
}
.multilineTextAlignment(.center)
.font(.largeTitle)
.padding(.bottom, -15.0)
NavigationView{
    List{
        ForEach(instrNewOld) { instrIdx in
            SourceCodeView(cat: instrIdx)
        }
    }
    .navigationBarTitle(Text("no text"), displayMode: .automatic)
    .navigationBarHidden(true)
}

Answer 4

此外，还展示了一种很棒的方法 here。

当你需要自定义导航栏时，它是完美的。关键字.principal用于定位

NavigationView {
    Text("Hello, SwiftUI!")
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                HStack {
                    Image(systemName: "sun.min.fill")
                    Text("Title").font(.headline)
                }
            }
        }
}

如何将 SwiftUI navigationBarTitle 居中对齐？

How to align a SwiftUI navigationBarTitle to be centered?

ios13

swiftui

xcode11