flutter 顶部导航DefaultTabController_flutter defaulttabcontroller

顶部导航
	需要将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: ,  未选中文字标签样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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

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自行设置
 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

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

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自行设置
 */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

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

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')
            ],
          ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52