效果

不多逼逼

Tabbar

先看Tabbar的参数

const TabBar({Key key,@required this.tabs, // itemthis.controller, //控制器this.isScrollable = false, //是否可以滑动this.indicatorColor, //指示器的颜色this.indicatorWeight = 2.0,this.indicatorPadding = EdgeInsets.zero,this.indicator,//自定义指示器this.indicatorSize,this.labelColor, // 选中文字颜色this.labelStyle, // this.labelPadding, // 文字的内边距this.unselectedLabelColor, // 未选中文字颜色this.unselectedLabelStyle,this.dragStartBehavior = DragStartBehavior.start, this.onTap,// 点击事件})
复制代码

TabBarView

 const TabBarView({Key key,@required this.children, // 每页的viewthis.controller, // 控制器this.physics,this.dragStartBehavior = DragStartBehavior.start,})
复制代码

好了,这两个必须关联起来用. 不然会报错

DefaultTabController

这个是一个无状态的控制器,很简单.但是要做成动态Tabbar的话,不能用这个.

TabController

也很简单.

 TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
复制代码

主要是这个TickerProvider.作用是获取每一帧刷新的通知.

其实也简单

直接 实现TickerProviderStateMixin就好了.

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin{TabController _tabController;@overridevoid initState() {super.initState();_tabController = new TabController(length: _spList.length, vsync: this);// 直接传this}
}
复制代码

如何动态创建

SharedPreferences 这里我使用了本地缓存来做的

添加插件

写个工具

class SpUtils {static Future<List<String>> getSpList(String key) async {SharedPreferences prefs = await SharedPreferences.getInstance();return prefs.getStringList(key) ?? [];}static setSpList(String key, List<String> list) async {SharedPreferences prefs = await SharedPreferences.getInstance();prefs.setStringList(key, list);}
}
复制代码

这样使用就简单很多了

完整的代码

import 'package:flutter/material.dart';
import '../util/SpUtils.dart';class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {var _bottomIndex = 0;var _spList = [];TabController _tabController;@overridevoid initState() {super.initState();_tabController = new TabController(length: _spList.length, vsync: this);}@overrideWidget build(BuildContext context) {SpUtils.getSpList('tabmenu').then((s) {if (_spList == s) {return;}setState(() {_spList = s;_tabController = new TabController(length: _spList.length, vsync: this);});});return Scaffold(appBar: new AppBar(titleSpacing: 0,title: Center(child: new TabBar(controller: _tabController,isScrollable: true,labelColor: Colors.white,tabs: _spList.map((f) {return Center(child: new Text(f),);}).toList(),),),actions: <Widget>[new Container(child: new Icon(Icons.arrow_drop_down),width: 48,)],),body: TabBarView(controller: _tabController,children: _spList.isEmpty? []: _spList.map((f) {return Center(child: new Text(f),);}).toList()),floatingActionButton: FloatingActionButton(onPressed: () {},tooltip: 'Increment',child: Icon(Icons.add),),bottomNavigationBar: new BottomNavigationBar(items: [new BottomNavigationBarItem(icon: Icon(Icons.home),title: new Container(),),new BottomNavigationBarItem(icon: Icon(Icons.whatshot),title: new Container(),),new BottomNavigationBarItem(icon: Icon(Icons.search),title: new Container(),),new BottomNavigationBarItem(icon: Icon(Icons.book),title: new Container(),),new BottomNavigationBarItem(icon: Icon(Icons.person),title: new Container(),),],currentIndex: _bottomIndex,type: BottomNavigationBarType.fixed,backgroundColor: Colors.white,selectedItemColor: Colors.blue,unselectedItemColor: Colors.grey,onTap: (i) {setState(() {_bottomIndex = i;});},), );}
}
复制代码

注意的点:

1._tabController 要重新创建.因为需要更新长度

SpUtils.getSpList('tabmenu').then((s) { //获取缓存if (_spList == s) {//防止递归刷新return;}setState(() {_spList = s;_tabController = new TabController(length: _spList.length, vsync: this);});});
复制代码

2.Tabbar放Appbard的title位置上

TabBar需要使用center包装.不然默认高度是不会占满的,当然也可以用其它办法

isScrollable需要设置为true.才能滑动.

 appBar: new AppBar(titleSpacing: 0,title: Center(child: new TabBar(controller: _tabController,isScrollable: true,labelColor: Colors.white,tabs: _spList.map((f) {return Center(child: new Text(f),);}).toList(),),),actions: <Widget>[new Container(child: new Icon(Icons.arrow_drop_down),width: 48,)],),
复制代码

最后

你怎么没说怎么动态的呢!

很简单.只要更新SharedPreferences的缓存值.就可以了.像 掘金的效果是跨页面开关的.所以使用SharedPreferences的缓存来做

期待你的留言 点赞

交流群:

Flutter:782978118

Android:493180098