当前位置： 移动技术网 > IT编程>移动开发>Android > Flutter学习笔记（17）--顶部导航TabBar、TabBarView、DefaultTabController

Flutter学习笔记（17）--顶部导航TabBar、TabBarView、DefaultTabController

2019年08月18日  | 移动技术网IT编程  | 我要评论

国乐琴舍,大众315,天津农学院教务管理系统

如需转载，请注明出处：flutter学习笔记（17）--顶部导航tabbar、tabbarview、defaulttabcontroller

 上一篇我们说了bottmnavigationbar底部导航组件，今天来学习一下顶部导航组件tabbar，tabbar选项卡一般位于appbar下方，通常和tabbar（顶部导航选项卡）一起使用的有tabbarview和tabcontroller。

tabbar：tab页的选项组件，默认为水平排列。

tabbarview：tab页的内容容器，tab页内容一般处理为随选项卡的改变而改变。

tabcontroller：tabbar和tabbarview的控制器，它是关联这两个组件的桥梁。

tabbar组件常见属性
属性名 类型 说明
isscrollable bool 是否可以水平移动
tabs list<widget> tab选项列表

 

 

 

 

 

tab组件常见属性
属性名 类型 说明
icon widget tab图标
text string tab文本

 

 

 

 

 

tabbarview组件常见属性
属性名 类型 说明
controller tabcontroller 指定视图的控制器
children list<widget> 视图组件的child为一个列表，一个选项卡对应一个视图

 

 

 

 

 

 

上面我们说的tabcontroller，与其并列的还有defaulttabcontroller，两者的区别是tabcontroller一般放在有状态组件中使用，而defaulttabcontroller一般放在无状态组件中使用。

下面通过defaluttabcontroller来关联tabbar和tabbarview来实现一个demo：



import 'package:flutter/material.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget{
  final list<tab> _mytabs = <tab>[
    tab(text: '选项一',icon: icon(icons.add_shopping_cart),),
    tab(text: '选项二',icon: icon(icons.wifi_tethering),),
    tab(text: '选项三',icon: icon(icons.airline_seat_flat_angled),)
  ];
  @override
  widget build(buildcontext context) {
    return new materialapp(
      debugshowcheckedmodebanner: false,
      title: 'tabbar demo',
      home: new scaffold(
        body: defaulttabcontroller(
            length: _mytabs.length,
            initialindex: 1,
            child: scaffold(
              appbar: new appbar(
                title: new text('tabbar demo'),
                leading: icon(icons.menu),
                actions: <widget>[
                  icon(icons.search)
                ],
                bottom: new tabbar(
                  tabs: _mytabs,
                  indicatorcolor: colors.black,
                  indicatorweight: 5,
                  indicatorsize: tabbarindicatorsize.label,
                  labelcolor: colors.limeaccent,
                  unselectedlabelcolor: colors.deeporange,
                ),
              ),
              body: new tabbarview(
                  children: _mytabs.map((tab tab){
                    return center(
                        child: new column(
                          mainaxissize: mainaxissize.min,
                          children: <widget>[
                            icon(icons.tab),
                            text(tab.text)
                          ],
                      ),
                    );
                  }).tolist(),
              ),
            )
        ),
      ),
    );
  }
}


 




 


 


效果截图：




接下来分别看一下defaulttabcontroller、tabbar、tabbarview的构造函数有什么：


    

  • defaulttabcontroller
    • 





  const defaulttabcontroller({
    key key,
    @required this.length,
    this.initialindex = 0,
    @required this.child,
  }) : assert(initialindex != null),
       super(key: key);




 


    

  • tabbar
    • 





  const tabbar({
    key key,
    @required this.tabs,//显示的标签内容，一般使用tab对象，也可以是其他widget
    this.controller,//tabcontroller对象
    this.isscrollable = false,//是否可以滚动
    this.indicatorcolor,//指示器颜色
    this.indicatorweight = 2.0,//指示器的高度
    this.indicatorpadding = edgeinsets.zero,//指示器底部的padding
    this.indicator,//指示器decoration，例如边框等
    this.indicatorsize,//指示器大小的计算方式，tabbarindicatorsize.tab：跟每个tab等宽，tabbarindicatorsize.label：跟文字等宽
    this.labelcolor,//选中label的颜色
    this.labelstyle,//选中label的样式
    this.labelpadding,每个label的padding
    this.unselectedlabelcolor,//未选中label的颜色
    this.unselectedlabelstyle,//未选中label的样式
  }) : assert(tabs != null),
       assert(isscrollable != null),
       assert(indicator != null || (indicatorweight != null && indicatorweight > 0.0)),
       assert(indicator != null || (indicatorpadding != null)),
       super(key: key);




 


    

  • tabbarview
    • 





  const tabbarview({
    key key,
    @required this.children,//tab页内容组件的数组集合
    this.controller,//tabcontroller对象
    this.physics,
  }) : assert(children != null), super(key: key);




 


总结一下使用吧：一般流程就是初始化tabs的list列表，先把选项卡的选项初始化出来，接下来就是defaulttabcontroller把tabbar和tabbarview关联起来，最后就是给tabbar和tabbarview设置各种属性来满足需求。


 



                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！
                        点击进行留言回复
                    

                

                 
                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网