Flutter 使用TabBar实现类似安卓中Fragment切换的效果

本文主要是介绍Flutter 使用TabBar实现类似安卓中Fragment切换的效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

TabBar使用步骤

1. 继承StatefulWidget
2. 页面必须实现SingleTickerProviderStateMixin
3. 页面初始化时，实例化TabController
4. 在TabBar和TabBarView组件中指定同一个controller

TabBar属性说明

属性	说明
tabs	一系列标签控件
controller	标签选择变化控制器
isScrollable	是否可滚动，默认false
indicatorColor	指示器颜色
indicatorWeight	指示器粗细
indicator	指示器
indicatorSize	指示器长短，tab：和tab一样长，label：和标签label 一样长
labelColor	选中标签颜色
labelStyle	选中标签样式
labelPadding	标签内边距
unselectedLabelColor	未选中标签颜色
unselectedLabelStyle	未选中标签样式

实现效果

具体实现如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class TabBarDemo2 extends StatefulWidget {_TabBarDemo createState() => _TabBarDemo();
}class _TabBarDemo extends State<TabBarDemo2>with SingleTickerProviderStateMixin {TabController _tabController; //控制器int selectedItem = 0; //当前选择项@overridevoid initState() {_tabController = new TabController(length: 7, vsync: this);_tabController.addListener(() {print("index--------"+_tabController.index.toString());setState(() {selectedItem = _tabController.index;});_tabController.animateTo(_tabController.index);});}@overrideWidget build(BuildContext context) {return Scaffold(body: Container(child: Column(children: [Container(height: 50,margin: EdgeInsets.only(top: 50),child: TabBar(isScrollable: true, //是否可用滚动，默认falsecontroller: _tabController,onTap: (int index) {//点击监听setState(() {selectedItem = index;});},tabs: [Text('TAB1', style: TextStyle(color: Colors.black)),Text('TAB2', style: TextStyle(color: Colors.black)),Text('TAB3', style: TextStyle(color: Colors.black)),Text('TAB4', style: TextStyle(color: Colors.black)),Text('TAB5', style: TextStyle(color: Colors.black)),Text('TAB6', style: TextStyle(color: Colors.black)),Text('TAB7', style: TextStyle(color: Colors.black))]),),Expanded(flex: 1,child: TabBarView(controller: _tabController,children: [Text('TAB1内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),),Text('TAB2内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),),Text('TAB3内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),),Text('TAB4内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),),Text('TAB5内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),),Text('TAB6内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),),Text('TAB7内容',style:TextStyle(fontSize: 16.0, fontWeight: FontWeight.w700),)],),),],),),);}
}

 

 

这篇关于Flutter 使用TabBar实现类似安卓中Fragment切换的效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---