怎么在颤振中使用TabLayout布的局

　　介绍

本篇文章给大家分享的是有关怎么在颤振中使用TabLayout布的局,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

<强>顶部TabBar

使用<代码>颤振创建xxxx 创建一个项目

打开项目文件夹,在自由目录里创建三个飞镖文件,内容分别如下

。飞镖

import “包:颤振/material.dart"; 　　class  First  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　,return 材料( 　　颜色:,Colors.green,才能 　　,); 　　,} 　　}

第二。飞镖

import “包:颤振/material.dart"; 　　 　　class  Second  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　,return 材料( 　　颜色:,Colors.red,才能 　　,); 　　,} 　　}

第三。飞镖

import “包:颤振/material.dart"; 　　class  Third  extends  StatelessWidget  { 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　,return 材料( 　　颜色:,Colors.yellow,才能 　　,); 　　,} 　　}

修改主要。飞镖文件内容,TabLayout布局是个有状态的组件,所以创建组件时要继承StatefulWidget类

动图中的TabBar是在支架中的appBar中定义的,也就是说TabBar是appBar的一部分

appBar:, appBar ( 　　标题:大敌;文本(widget.title), 　　,底部:TabBar ( 　　,控制器:tabController, 　　标签:大敌;& lt; Tab> ( 　　new 才能;选项卡(文本:“问答“), 　　new 才能;选项卡(文本:“分享“), 　　new 才能;选项卡(文本:“博客“), 　　,), 　　,), 　　),

每个tabbar对应的视图是在身体里定义的,按照顺序初始化好即可

//,引入,dart 文件 　　import  & # 39; First.dart& # 39;, as ; 　　import  & # 39; Second.dart& # 39;, as 第二; 　　import  & # 39; Third.dart& # 39;, as 第三; 　　身体:TabBarView(控制器:tabController,,孩子们:,& lt; Widget> ( 　　,new  first.First (), 　　,new  second.Second (), 　　,new  third.Third (), 　　]),

完整代码:

import  & # 39;包:颤振/material.dart& # 39;; 　　 　　import  & # 39; First.dart& # 39;, as ; 　　import  & # 39; Second.dart& # 39;, as 第二; 　　import  & # 39; Third.dart& # 39;, as 第三; 　　 　　void  main(),=祝辞,runApp (MyApp ()); 　　 　　class  MyApp  extends  StatelessWidget  { 　　,//却;能够widget  is 从而root  of  your 应用程序。 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　,return  MaterialApp ( 　　标题:才能,& # 39;Flutter 演示# 39; 　　,,主题:ThemeData ( 　　,,primarySwatch: Colors.blue, 　　),才能 　　,,:MyHomePage(标题:& # 39;TabLayout 演示# 39;), 　　,); 　　,} 　　} 　　 　　class  MyHomePage  extends  StatefulWidget  { 　　,MyHomePage ({Key 关键,this.title}),:,超级(关键:键); 　　 　　标题,final  String ; 　　 　　,@override 　　,_MyHomePageState  createState(),=祝辞,_MyHomePageState (); 　　} 　　 　　class  _MyHomePageState  extends  State< MyHomePage> 　　,with  SingleTickerProviderStateMixin  { 　　,TabController  tabController; 　　 　　,@override 　　,void  initState (), { 　　,super.initState ();=,,tabController  new  TabController(长度:3,vsync:,); 　　,} 　　 　　,@override 　　,void 处理(),{ 　　,super.dispose (); 　　,tabController.dispose (); 　　,} 　　 　　,@override 　　,Widget 构建(BuildContext 上下文),{ 　　,return 支架( 　　,,appBar: appBar ( 　　标题:才能,文本(widget.title), 　　底才能:TabBar ( 　　,,,控制器:tabController, 　　,,,标签:& lt; Tab> [ 　　,,new 选项卡(文本:“问答“), 　　,,new 选项卡(文本:“分享“), 　　,,new 选项卡(文本:“博客“), 　　,,,, 　　),才能 　　),才能 　　,,身体:TabBarView(控制器:tabController,,孩子们:,& lt; Widget> ( 　　new 才能first.First (), 　　new 才能second.Second (), 　　new 才能third.Third (), 　　]),才能 　　,); 　　,} 　　}

<>强底部TabBar

上面定义的是顶部的TabBar,很多应用的布局都是底部有见个TabBar,其实底部的定义方法就是将appBar属性中给的底注释掉,然后在跟appBar同级的位置定义一个bottomNavigationBar属性,其孩子就是TabBar组件,TabBar的视图跟上面定义方法是一样的,代码如下

怎么在颤振中使用TabLayout布的局