自定义导航栏标题与按钮

在 SwiftUI 中，你可以轻松自定义导航栏的标题，使其更具个性化。使用 .navigationTitle() 修饰符，你可以设置导航栏的标题文本。例如：

NavigationView {
    List {
        Text("第一项")
        Text("第二项")
    }
    .navigationTitle("我的列表")
}

这段代码会在导航栏中显示 "我的列表" 作为标题。是不是很简单呢？🎉

修改导航栏样式

想要更进一步自定义导航栏的外观吗？你可以使用 toolbar 修饰符来添加按钮，或者修改标题的显示方式。例如，你可以添加一个编辑按钮：

NavigationView {
    List {
        Text("第一项")
        Text("第二项")
    }
    .navigationTitle("我的列表")
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("编辑") {
                // 编辑操作
            }
        }
    }
}

这段代码会在导航栏的右侧添加一个 "编辑" 按钮。你可以根据需要调整 placement 参数，将按钮放置在不同的位置。🚀

使用 Large Title

iOS 17 允许你使用 Large Title 样式，让标题更大更醒目。你可以通过 .navigationBarTitleDisplayMode(.large) 来启用 Large Title：

NavigationView {
    List {
        Text("第一项")
        Text("第二项")
    }
    .navigationTitle("我的列表")
    .navigationBarTitleDisplayMode(.large)
}

Large Title 在滚动时会自动缩小，提供更好的用户体验。试试看，效果非常棒！✨

添加自定义按钮

除了系统提供的按钮，你还可以添加自定义的按钮，实现更复杂的功能。例如，你可以添加一个添加按钮：

NavigationView {
    List {
        Text("第一项")
        Text("第二项")
    }
    .navigationTitle("我的列表")
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button(action: {
                // 添加操作
            }) {
                Image(systemName: "plus")
            }
        }
    }
}

这段代码会在导航栏的右侧添加一个 "+" 按钮，点击后可以执行添加操作。你可以使用 Image(systemName:) 来显示系统图标，也可以使用自定义的图片。👍

通过这些方法，你可以轻松自定义导航栏的标题和按钮，让你的应用更具个性化和功能性。记住，灵活运用这些技巧，打造出色的用户界面！🎉