如题,使用 Flutter 来实现题目效果要比 Android 原生实现简单一些
先上效果图
在实现之前,先看一下 Flutter 中 TabBar 及 TabBarView 的属性
好了,现在我们开始吧
一、准备数据和图标
数据就是 String 类型的,而图标则是Widget,下文会用到~
二、通过 for 循环,将 TabBar 的 Tab 标签 List 准备好
三、定义一个 TabBar 控件,会在下一步引用到
四、用一个默认的 TabController 去将 上一步的 TabBar 包裹住,在这里,为了美观,我们将 TabBar 放置于 Scaffold 脚手架 下方
完工
需要注意的是,我们必须用TabController 将 TabBar 包裹,否则就会报出没有设定 TabController的错误