查企业不要钱的软件,淘宝关键词优化技巧教程,做网站的相关术语,中国十大软件外包公司背景
很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑#xff0c;比如购物软件常有#xff1a;已完成#xff0c;已发货#xff0c;待付款三个顶部导航按钮#xff0c;点击则下面的页面显示不同属性的订单
正文
在flutter中#xff0c;实现这样的功能需…背景
很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑比如购物软件常有已完成已发货待付款三个顶部导航按钮点击则下面的页面显示不同属性的订单
正文
在flutter中实现这样的功能需要依靠TabBar进行页面选择和TabBarView展示不同页面而TabController起到沟通这两个控件的作用。
DefaultTabController
DefaultTabController它是一个flutter内置的简易控制器常在功能不复杂时候用于快速构建页面
DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: [],),),body: TabBarView(children: [],),),
)
手动创建TabController
更复杂功能的场景比如动态添加或删除标签页监听标签页变化需要手动创建TabController
步骤如下
StatefulWidget中初始化TabController使用with SingleTickerProviderStateMixin或TickerProviderStateMixin如果有多个动画控制器在initState方法中初始化TabController并在dispose方法中释放它
class _MyTabbedPageState extends StateMyTabbedPage with SingleTickerProviderStateMixin {TabController? _tabController;overridevoid initState() {super.initState();_tabController TabController(vsync: this, length: 3);}overridevoid dispose() {_tabController?.dispose();super.dispose();}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(bottom: TabBar(controller: _tabController,tabs: [],),),body: TabBarView(controller: _tabController,children: [],),);}
}
性能
使用TabBarView所有的标签页内容默认都会被加载。如果每个标签页中都有复杂的布局或需要加载大量数据会影响性能
