flutter 顶部导航DefaultTabController

￡神魔★判官ぃ 2021-07-24 14:21 720阅读 1赞

顶部导航
    	需要将Scaffold组件包裹在DefaultTabController组件内
    	
    
    DefaultTabController(
        length: 2, //配置顶部tab的数量
        child:Scaffold(
          appBar: AppBar(
              title: Text(this.title2),
              bottom: TabBar(   顶部导航栏TabBar在bottom中设置
                tabs: <Widget>[    导航栏bar
                  Tab(text:"顶部1"),   bar中的文字标签内容
                  Tab(text:"顶部2")
                ],
             ),
           ),
          body: TabBarView(  点击bar对应的内容,第一个组件对应第一个bar,第二个对应第二个,以此类推
            children: <Widget>[
            
                Text("第一个bar内容")
                Home()
            ],
          ),
        ),
    );
    
    
    在导航栏中嵌套顶部导航栏设置
    
    	比如已经设置底部导航栏再设置其中页面的顶部导航栏
    	
    		出现问题:
    			因为底部导航栏已经使用过Scaffold设置了顶部栏目主题信息,再使用顶部导航栏
    			时候还要使用Scaffold设置,这就导致了会有两个顶部栏目，即两个标题
    		
    		解决方案:
    			将顶部导航栏的内容放置自身Scaffold的title中,这样导航栏信息就会出现在底部导航栏设置的Scaffold的下面
    		
    		如下:
    		 DefaultTabController(
    		      length: 2,
    		      child: Scaffold(
    		      
    		        appBar: AppBar(
    		        
    		          title: Row(   //因为title接收组件,故在title中设置导航栏
    		            children: <Widget>[
    		              Expanded(
    		                child: TabBar(
    		                  tabs: <Widget>[
    		                    Tab(text: '分类1'),
    		                    Tab(text: '分类2',)
    		                  ],
    		                )
    		              )
    		            ],
    		          ),
    		          
    		        ),
    		         body:TabBarView(
    		            children: <Widget>[
    		              Text('分类111'),
    		              Text('分类222')
    		            ],
    		          ),
    		      ),
    		    );
    
    
    顶部导航栏参数配置
    	在TabBar中与tabs同级设置
    	
        indicatorColor: Colors.red,  bar的下划线指示器选中颜色
        isScrollable: true,  导航栏是否可以滑动
        indicatorWeight:  bar的下划线指示器的高度
        indicatorPadding: ,  bar的下划线指示器的padding
        labelColor: Colors.red,  标签文字颜色
        indicatorSize: TabBarIndicatorSize.label, 下划线指示器与标签文字等宽,默认为tab与bar等宽
        labelStyle: , 标签文字样式
        labelPadding: , 标签文字padding 
        unselectedLabelColor: Colors.green,   未选中文字标签颜色
        unselectedLabelStyle: ,  未选中文字标签样式

代码示例:  
**普通页面顶部栏目信息设置:**

import 'package:flutter/material.dart';
    
    import '../main.dart';
    
    class Me2 extends StatefulWidget { 
      String title='me';
    
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Me2> { 
    
      @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: (){ },
              )
            ],
            iconTheme: IconThemeData(color: Colors.blue,size:24.0,opacity: 0.5), //设置字体图标样式
            textTheme:TextTheme(title: TextStyle(color: Colors.blue) ), //设置标题栏文字样式
          ),
          body: Home(),
        );
      }
    }
    
    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自行设置 */

**普通页面顶部导航栏设置:**

import 'package:flutter/material.dart';
    
    class Me extends StatefulWidget { 
      String title='me';
    
      Me({ this.title="表单"});
    
      @override
      _Home2State createState() => _Home2State(title2:this.title);
    }
    
    class _Home2State extends State<Me> { 
      String title2;
      _Home2State({ this.title2='hh'});
      @override
      Widget build(BuildContext context) { 
        return  DefaultTabController(
            length: 2, //配置顶部tab的数量
            child:Scaffold(appBar: AppBar(
              title: Text(this.title2),
              //配置顶部导航栏
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(text:"顶部1"),
                  Tab(text:"顶部2")
                ],
              
              ),
    
              ),
              body: TabBarView(
                children: <Widget>[
                  ListView(
                    children: <Widget>[
                      ListTile(
                        title: Text('第一个'),
                      )
                    ],
                  ),
                Home()
                ],
              ),
            ),
        );
    
      }
    }
    
    
    class Home extends StatelessWidget { 
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Column(
            children: <Widget>[
              Text("meeee"),
              RaisedButton(
                color:Theme.of(context).accentColor,
                child: Text('到我的子页面'),
                onPressed: (){ 
                  // Navigator.pushNamed(context, '/me2');
                  //替换当前页面为指定页面,被替换的页面不入栈
                  Navigator.of(context).pushReplacementNamed('/me2');
                },
              ),
              RaisedButton(
                child: Text('返回'),
                color:Theme.of(context).accentColor,
                onPressed:(){ 
                  Navigator.of(context).pop();
                }
              )
            ],
          ),
        );
      }
    }
    
    /* 单独的页面没有主题样式,需要通过Scaffold自行设置 */

**底部导航栏页面中嵌套顶部导航栏页面:**

import 'package:flutter/material.dart';
    
    class Home2 extends StatefulWidget { 
      Home2({ Key key}) : super(key: key);
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Home2> { 
      @override
      Widget build(BuildContext context) { 
      
        return DefaultTabController(
          length: 2,
          
          child: Scaffold(
            appBar: AppBar(
            //在title中设置顶部导航栏信息
              title: Row(
                children: <Widget>[
                  Expanded(
                    child: TabBar(
                      tabs: <Widget>[
                        Tab(text: '分类1'),
                        Tab(text: '分类2',)
                      ],
                      indicatorColor: Colors.red, //bar的下划线指示器选中颜色
                      isScrollable: true, //导航栏是否可以滑动
                      // indicatorWeight: bar的下划线指示器的高度
                      // indicatorPadding: , bar的下划线指示器的padding
                      labelColor: Colors.red, //标签文字颜色
                      indicatorSize: TabBarIndicatorSize.label,//下划线指示器与标签文字等宽,默认为tab与bar等宽
                      // labelStyle: , 标签文字样式
                      // labelPadding: , 标签文字padding 
                      unselectedLabelColor: Colors.green, //未选中文字标签颜色
                      //unselectedLabelStyle: , 未选中文字标签样式
                    )
                  )
                ],
              ),
            ),
             body:TabBarView(
                children: <Widget>[
                  Text('分类111'),
                  Text('分类222')
                ],
              ),
          ),
        );
      }
    }