Flutter学习：关于Tab导航栏_flutter tab

Flutter关于Tab导航栏：

包括以下几种情况：
1、 底部Tab切换
2、 自定义顶部Tab
3、 使用TabController实现顶部Tab切换

---

1. 底部Tab切换

使用bottomNavigationBar实现底部Tab栏，这里需要注意控制切换的currentIndex，另外大于三个tab进行设置，type: BottomNavigationBarType.fixed配置底部tabs可以有多个按钮。

import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
import 'tabs/User.dart';

class Tabs extends StatefulWidget {
  // 这里的index可以实现从其他页面跳转回来时，进入你需要的tab
  //  可见路由跳转的笔记--返回根路由
  final index;
  Tabs({Key key, this.index = 0}) : super(key: key);
  @override
  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {
  List pageList = [HomePage(), CategoryPage(), SettingPage(), UserPage()];
  int _currentIndex;
  _TabsState(index) {
    _currentIndex = index;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: this.pageList[this._currentIndex],
      bottomNavigationBar: 
      BottomNavigationBar(
        currentIndex: this._currentIndex,
        // 点击
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        iconSize: 28, // 图标大小
        fixedColor: Colors.blueAccent, // 图标颜色
        // 每一个BottomNavigationBarItem是一个tab
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle),label: "我的")
        ],
        type: BottomNavigationBarType.fixed, // 大于三个tab进行设置
      ),
    );
  }
}

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

2. 自定义顶部Tab

使用DefaultTabController进行自定义，tabs中放你需要定义的Tab，TabBarView则是相对应的页面内容展示，另外有一些tabbar常见属性如下：

import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  DemoPage({Key key}) : super(key: key);

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

class _DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2, // 顶部Tab切换的数量
        child: Scaffold(
            appBar: AppBar(
                title: Text("AppBarDemo"),
                centerTitle: true, // 标题居中
                backgroundColor: Colors.pinkAccent[100],
                bottom: TabBar(
                    labelColor: Colors.white, // 选中项颜色
                    indicatorColor: Colors.pink, // 底部选中条颜色
                    unselectedLabelColor: Colors.pinkAccent[50], // 未选择tab颜色
                    indicatorSize: TabBarIndicatorSize.label, // 底部选中条长度
                    tabs: <Widget>[
                      Tab(text: "热门"),
                      Tab(text: "我的")
                    ])),
            body: TabBarView(
              children: [
                ListView(
                  children: [
                    ListTile(
                      title: Text("这里是热门搜索"),
                    ),
                    ListTile(
                      title: Text("这里是热门搜索"),
                    ),
                    ListTile(
                      title: Text("这里是热门搜索"),
                    )
                  ],
                ),
                ListView(
                  children: [
                    ListTile(
                      title: Text("这里是我的内容"),
                    ),
                    ListTile(
                      title: Text("这里是我的内容"),
                    ),
                    ListTile(
                      title: Text("这里是我的内容"),
                    )
                  ],
                )
              ],
            )));
  }
}

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

也可以在已有底部tab的页面再放入一个顶部tab，这时可以使用Row进行包裹，Expanded布局，代码如下：

import 'package:flutter/material.dart';

class SettingPage extends StatefulWidget {
  SettingPage({Key key}) : super(key: key);

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

class _SettingPageState extends State<SettingPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            // 顶部导航
            title: Row(
              children: <Widget>[
                Expanded(
                    child: TabBar(tabs: [
                  Tab(text: "热门"),
                  Tab(text: "推荐"),
                  Tab(text: "我的")
                ]))
              ],
            ),
          ),
          body: TabBarView(
            children: [
              ListView(
                children: [
                  ListTile(title: Text("这里是热门")),
                  ListTile(title: Text("这里是热门")),
                  ListTile(title: Text("这里是热门")),
                ],
              ),
              ListView(
                children: [
                  ListTile(title: Text("这里是推荐")),
                  ListTile(title: Text("这里是推荐")),
                  ListTile(title: Text("这里是推荐")),
                ],
              ),
              ListView(
                children: [
                  ListTile(title: Text("这里是我的")),
                  ListTile(title: Text("这里是我的")),
                  ListTile(title: Text("这里是我的")),
                ],
              )
            ],
          ),
        ));
  }
}

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

3. 使用TabController实现顶部Tab切换

如果页面中有请求数据，下拉刷新或者滑动切换等需求，使用第2点中所述方法就有些麻烦，这时我们可以使用TabController自定义顶部Tab。可以使用addListener()进行切换的监听。另外需要注意TabBar和TabBarView都需要controller: this._tabController。

import 'package:flutter/material.dart';

class ControllerPage extends StatefulWidget {
  ControllerPage({Key key}) : super(key: key);

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

class _ControllerPageState extends State<ControllerPage> with SingleTickerProviderStateMixin {
  TabController _tabController;

  // 组件初始化生命周期函数 加载时触发
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this);
    // 监听tab切换事件 可扩展
    _tabController.addListener(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ControllerPage"),
          bottom: TabBar(
            controller: this._tabController, // 注意
            tabs: [Tab(text: "标题1"), Tab(text: "标题2"), Tab(text: "标题3")],
          ),
        ),
        body: TabBarView(
          controller: this._tabController, // 注意
          children: [
            Center(
              child: Text(
                "标题一页面",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Center(
              child: Text(
                "标题二页面",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
            Center(
              child: Text(
                "标题三页面",
                style: TextStyle(fontSize: 25.0),
              ),
            ),
          ],
        ));
  }
}

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