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

雨点打透心脏的1/2处 2021-07-24 18:27 360阅读 0赞

控制器实现顶部导航
    
    	**必须通过有状态组件来实现**
    	
    (1)定义控制器(可以将new对象的操作放在生命周期里)
     	TabController _tabController =new TabController(length: bar的数量, vsync: this)
     
    (2)继承了状态类的类还必须with多继承如下类
    	SingleTickerProviderStateMixin
    	
    (3)监听bar的切换事件(可以将添加监听事件的操作放在生命周期里)
    
     _tabController.addListener((){  //监听bar的切换
          	print(_tabController.index);  //打印bar的索引
        });
        
    (4)在生命周期函数中创建控制器和销毁控制器避免内存泄漏,看代码示例
    		  生命周期函数,组件销毁时触发
    			  @override
    			  void dispose() {
    			    super.dispose();
    			  }
    			
    			  生命周期函数,加载就会触发
    			  @override
    			  void initState() {
    			    super.initState();
    						
    			    });
    			  }
    (5)实现
    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();
         _tabController.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自行设置 */