iOS 16 SwiftUI 4.0 轻松实现导航栏标题可编辑
概览
在 MacOS 和 iPadOS 中,我们可以直接点击编辑导航栏标题的内容,给用户以超直观的使用体验。
从 iOS 16 开始,我们也可以在 iOS 中实现同样的功能啦:
如上图所示,我们在 iOS 16 中仅用3行代码就实现了 SwiftUI 导航栏标题文本可编辑!因为标题直接与 List 项绑定,所以修改标题会立即引起列表内容的刷新。
废话少叙,让我们马上开始吧!
Let‘s go!😉
三行代码
在 iOS 16 中,要想实现导航栏标题文本可编辑非常简单。
只需满足3个条件:
- 将 SwiftUI 状态绑定到导航栏标题
- 使用 inline 样式
- 设置 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..<10 {
items.append(Item(name: "item \(i)"))
}
}
}
}
如上代码所示,我们首先将列表项对应 Item 的 name 属性绑定到导航栏标题,接着设置导航栏样式为 inline,最后应用 editor 角色到 toolbar 上。
值得注意的是,在当前 iOS 16 中测试发现即使不应用 toolbar 角色,也可以达到导航栏标题可编辑的目的,但不知未来版本会不会有所变化。
至此,我们仅用 3 行代码就实现了博文开头所讨论的功能,给自己点个赞吧!🚀
总结
在本篇博文中,我们利用 iOS 16 中 SwiftUI 4.0 的新方法,实现了导航栏标题文本可编辑。
是不是很简单呢?
感谢观赏,再会!😎
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfhkaeb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24