flutter 控制器实现顶部导航(便于监听以及请求)、生命周期函数

控制器实现顶部导航

	**必须通过有状态组件来实现**
	
(1)定义控制器(可以将new对象的操作放在生命周期里)
 TabController _tabController =new TabController(length: bar的数量, vsync: this)
 
(2)监听bar的切换事件(可以将添加监听事件的操作放在生命周期里)

 _tabController.addListener((){  //监听bar的切换
      	print(_tabController.index);  //打印bar的索引
    });
    
(3)实现
Scaffold(
  appBar: AppBar(
    title: Text('me-son'),
    bottom: TabBar(
    
      controller: this._tabController,  加上控制器
      
      tabs: <Widget>[
        Tab(text: '第一个'),
        Tab(text: '第二个')
      ],
    ),
  ),
  body: TabBarView(
  
    controller: this._tabController,   加上控制器
    
    children: <Widget>[
      Text("啊哈哈"),
      Text('哇咔咔')
    ],
  ),
);

生命周期函数
  
  生命周期函数,组件销毁时触发
  @override
  void dispose() {
    super.dispose();
  }

  生命周期函数,加载就会触发
  @override
  void initState() {
    super.initState();
			
    });
  }

代码示例:

import 'package:flutter/material.dart';

import '../main.dart';

class Me2 extends StatefulWidget {
  String title='me';


  @override
  _Home2State createState() => _Home2State();
}

class _Home2State extends State<Me2> with SingleTickerProviderStateMixin {

  //定义tab控制器
  TabController _tabController;

  @override
  void dispose() { //生命周期函数,组件销毁时触发
    // TODO: implement dispose
    super.dispose();
  }

  //生命周期函数,加载就会触发
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController=new TabController(length: 2, vsync: this);
    _tabController.addListener((){
      print(_tabController.index);
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true, //标题栏文字居中 
        title: Text('me-son'),
        backgroundColor: Colors.red, //顶部导航栏背景色
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: (){
            
          },
        ),  //设置顶部左侧图标,默认为箭头,实现事件需要IconButton
        actions: <Widget>[  //给右侧添加内容
          IconButton(
            icon:Icon(Icons.search),
            onPressed: (){},
          )
        ],
        bottom: TabBar(
          //加上控制器
          controller: this._tabController,
          tabs: <Widget>[
            Tab(text: '第一个'),
            Tab(text: '第二个')
          ],
        ),
      ),
      body: TabBarView(
        controller: this._tabController,
        children: <Widget>[
          Text("啊哈哈"),
          Text('哇咔咔')
        ],
      ),
    );
  }
}

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          Text('me-sonnnnn'),
          RaisedButton(
            color: Theme.of(context).accentColor,
            child: Text('回到根'),
            onPressed: (){
              Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs(index: 2)), 
              (route) => route == null );
            },
          ),
        ],
      )
    );
  }
}

/*
单独的页面没有主题样式,需要通过Scaffold自行设置
 */