swiftui之导航条

486 阅读2分钟

随便一搜,导航条的文章都还是NavigationView 。不过到官方文档一看,这个已经过时了。

image.png 18.2过时了。好家伙。swiftui你真狗,api嘎嘎迭代更新,希望你新推出来的api更加好用,简单。

不过,还是让我们先看看这个怎么用吧。xcode又在升级,要下载新的模拟器,垃圾玩意。把我电脑空间全给霍霍了。先看下代码吧

image.png

navigationview里面放了两个内容,一个list,一个text。所以它本身可以放多个视图吗? 感觉不太对

image.png 传入的闭包返回值是一个Content,而Content是一个View

image.png

而list和text并列,这样不太行吧?这不是多个view了吗?好歹要包裹一下吧。按下不表,等我xcode模拟器安装好了试一下

image.png

有两个主要的api,一个是style的,一个是title的。先看下style的api

image.png

函数参数用到了一个范型,S要求继承自NavigationViewStyle 在看下这个类型

image.png

可以看到有三种内置样式。

  • 自动样式,也是默认样式
  • columns样式,
  • stack样式。

不知道这几种有啥区别,等下试下 下面还有四种support type,前三个是看起来是重合的,最后还有一个double column样式。等下试试。

不过看文档,stack是单页模式

image.png

默认的则是分栏模式,比如在ipad等设备上

image.png

再看title api,就很简单了就是一个字符串

image.png

展开show all declarations。猜我看到啥了,好多同名但是不同参数的api哦,最重要的是。最底下的一个,可以传入一个自定义view诶,看看能不能实现一下自定义导航条。

image.png

模拟器装好了。开干!!!

一开始就遇到问题了,哈哈哈,前面的示例代码是不能运行的

image.png 这个代码根本没有model数据,所以我只能更换一下

image.png

在iphone上效果如下

simulator_screenshot_CCDE82C4-3F5A-4ACF-A30D-F15F57B2FD71.png

在ipad上效果如下

image.png

展开效果

image.png

点击左边的item没有用。可能是缺少NavigationLink这个吧。

看一下这个怎么使用,看了一下官方说明,是针对最新的 NavigationStack and NavigationSplitView

妈蛋,每一次更新都是学习成本啊。shit。


下面是一个使用navigaitonview和navigationlink的demo示例。

image.png

image.png

可以看到用navigationview放在最外层,包住了一个列表。 使用section进行分组,section的header作为表头 section中遍历每一条row,如果要让row可以点击,需要用哪个navigaitonlink包裹起来,其中label是row,二destination是详情页面。

另一个是,navigationview中确实可以放两个组件,在iphone上第二个组件没有出现,但是在ipad上,第二个组件直接作为没选中时候的详情出现了。

如果去掉的话ipad上会显示一个空白

image.png

所以到现在熟悉了下navigationview和navigationlink的用法了。