flutter 顶部导航栏切换详解

重点：
页面必须继承StatefulWidget
页面必须实现SingleTickerProviderStateMixin
页面初始化时，实例化TabController //用于监听管理
在TabBar组件中指定controller为我们实例化的TabController
在TabBarView组件中指定controller为我们实例化的TabController

class DaoHangNan extends StatefulWidget //继承StatefulWidget{
    
    
  TabController _controller;//实例化TabController
  DaoHangNan(this._controller);
  @override
  State<StatefulWidget> createState() {
    
    
    return _DaoHangNanState();
  }

}

class _DaoHangNanState extends State<DaoHangNan>
    with SingleTickerProviderStateMixin //实现SingleTickerProviderStateMixin {
    
    
  var _controller; //用于导航栏监听

  @override
  void initState() {
    
     //initState页面初始化
    super.initState();
    _controller = TabController(length: 5, vsync: this); //导航栏监听管理
  }

  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      children: [
      Container(
      height: 50.0,
      child: TabBar(
        indicatorColor: Color.fromARGB(255, 229, 102, 152), //导航底部的颜色
        indicatorSize: TabBarIndicatorSize.label, //导航底部那条线的长度 
        tabs: <Widget>[
          Text("直播", style: TextStyle(color: Colors.black, fontSize: 15.0),),
          Text("推荐", style: TextStyle(color: Colors.black, fontSize: 15.0),),
          Text("追番", style: TextStyle(color: Colors.black, fontSize: 15.0),),
          Text("国家", style: TextStyle(color: Colors.black, fontSize: 15.0),),
          Text("故事", style: TextStyle(color: Colors.black, fontSize: 15.0),),
        ],
        controller: widget._controller,//指定controller为我们实例化的TabController
      ),
    ),
  ]);

  }

}