iOS 16 中 SwiftUI 4.0 轻松实现导航栏标题可编辑

概览

在 MacOS 和 iPadOS 中，我们可以直接点击编辑导航栏标题的内容，给用户以超直观的使用体验。

从 iOS 16 开始，我们也可以在 iOS 中实现同样的功能啦：

如上图所示，我们在 iOS 16 中仅用3行代码就实现了 SwiftUI 导航栏标题文本可编辑！因为标题直接与 List 项绑定，所以修改标题会立即引起列表内容的刷新。

废话少叙，让我们马上开始吧！

Let‘s go！😉

三行代码

在 iOS 16 中，要想实现导航栏标题文本可编辑非常简单。

只需满足3个条件：

1. 将 SwiftUI 状态绑定到导航栏标题
2. 使用 inline 样式
3. 设置 editor 角色

下面，直接上代码：

struct Item: Identifiable {
    var name: String
    var id = UUID()
}

struct MainView: View {
    
    @State var items = [Item]()
    // 当前选中的列表项索引
    @State var selectItemIdx = 0
    
    var body: some View {
        NavigationStack {
            
            if !items.isEmpty {
                List {
                    ForEach(items.enumerated().map {$0}, id: \.1.id){ idx,item in
                        Text(item.name)
                            .padding()
                            .onTapGesture {
                                selectItemIdx = idx
                            }
                    }
                }
                // 导航栏标题绑定到列表项的name属性
                .navigationTitle($items[selectItemIdx].name)
                // 导航栏样式为 inline
                .navigationBarTitleDisplayMode(.inline)
                // toolbar 角色为 editor
                .toolbarRole(.editor)
            }
        }
        .onAppear {
            for i in 0..