TabBar:用标签形式展示内容

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

Tab,选项卡 .. 也可以叫标签 .. 在 flutter 应用的界面上,使用这种标签的形式展示内容,需要三样东西 .. TabBar,标签栏 ... TabView,标签视图 .. 还有 TabController ,标签控制器 .. 标签控制器的主要作用就是控制按了什么标签,打开哪一个标签视图 ..

我们可以创建自己的 TablController ... 或者使用默认的 TablController ... 先剪切一下这里用的这个 Scaffold .. 返回一个 DefaultTabController ... 在它里面先用 length 设置一下标签的数量 ..

然后是 child ... 设置一下它的子部件 .. 里面可以用一个 Scaffold .. 标签栏可以放在 AppBar 的 bottom 里面 ..

添加一个 bottom .. 用一下 TabBar 这个小部件 .. 里面可以使用 tabs .. 设置一组标签 .. 每个标签用一个 Tab 小部件 .. 里面添加一个 icon 属性,设置一下标签的小图标 .. 这个小图标可以使用 Icon 部件 .. 然后再设置一下要使用的小图标 ..

复制两份 .. 再添加两个 Tab .. 修改一下标签上用的图标.. 先随便选两个小图标 ..

现在你会发现,在 AppBar 的上面,会显示一组标签 .. 这个位置就是 AppBar 的 bottom .. 就是底部的位置 ..

每个标签可以对应一个标签视图 .. 在标签视图上可以显示对应的标签内容 ..

这个标签视图可以放在 Scaffold 部件的 body 里面 .. 让它作为界面的主体内容 .. 用一个 TabBarView 小部件 .. 里面添加一个 children ... 它里面的东西就是一组对应的标签内容..

暂时我们先只显示一个小图标 .. 用一下 Icon 部件 .. 设置一下要使用小图标 .. 然后再用 size 设置一下图标的大小 ... 比如 128.0 ... 再用一个 color 设置一下图标的颜色 ... 用一种半透明的黑色 ..

再复制两份,设置一下另外两个标签的内容 .. 修改一下要使用的小图标 ...

保存一下 .. 热加载以后 .. 可以到模拟器上去试一下我们创建的这个标签界面 ..

按下标签 ... 会打开对应的标签内容 ...

或者也可以用扫动手势控制显示的标签内容 ...

标签是用 TabBar 小部件设置的 ... 标签的内容 .. 需要放在 TabBarView 里面 ... 把标签还有标签内容链接到一块儿的东西叫做 TabBarController ...

TabBar:用标签形式展示内容《 Flutter 移动应用:界面结构 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点