【Flutter】三十四、Flutter常用组件——Tab导航栏_flutter tab

在Flutter中完成一个导航栏有两种方式：一种是通过DefaultTabController，另一种是通过TabController:

一、使用DefaultTabController

import 'package:flutter/material.dart';

class TabDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
      length: 7,
      initialIndex: 3, // 默认选中第几项
      child: Scaffold(
        appBar: PreferredSize(
          child: AppBar(
            title: TabBar(
              isScrollable: true,
              tabs: [
                Tab(text: '推荐1'),
                Tab(text: '推荐2'),
                Tab(text: '推荐3'),
                Tab(text: '推荐5'),
                Tab(text: '推荐4'),
                Tab(text: '推荐6'),
                Tab(text: '推荐7'),
              ],
              indicatorWeight: 2,
              indicatorSize: TabBarIndicatorSize.label,
              labelPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 15.0),
            ),
            automaticallyImplyLeading: false,
          ),
          preferredSize: Size.fromHeight(50.0),
        ),
        body: TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐1'),
                ),
                ListTile(
                  title: Text('推荐1'),
                ),
                ListTile(
                  title: Text('推荐1'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐2'),
                ),
                ListTile(
                  title: Text('推荐2'),
                ),
                ListTile(
                  title: Text('推荐2'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐3'),
                ),
                ListTile(
                  title: Text('推荐3'),
                ),
                ListTile(
                  title: Text('推荐3'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐4'),
                ),
                ListTile(
                  title: Text('推荐4'),
                ),
                ListTile(
                  title: Text('推荐4'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐5'),
                ),
                ListTile(
                  title: Text('推荐5'),
                ),
                ListTile(
                  title: Text('推荐5'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐6'),
                ),
                ListTile(
                  title: Text('推荐6'),
                ),
                ListTile(
                  title: Text('推荐6'),
                ),
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                  title: Text('推荐7'),
                ),
                ListTile(
                  title: Text('推荐7'),
                ),
                ListTile(
                  title: Text('推荐7'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

二、使用TabController

class TabControllerDemo extends StatefulWidget{
  @override
  _TabControllerDemoState createState() {
    // TODO: implement createState
    return _TabControllerDemoState();
  }
}

class _TabControllerDemoState extends State<TabControllerDemo> with SingleTickerProviderStateMixin{
  final List<Tab> tabs = [
    Tab(text: '推荐1',),
    Tab(text: '推荐2',),
    Tab(text: '推荐3',),
  ];
  TabController _controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: TabBar(
          tabs: tabs,
          controller: _controller,
        ),
      ),
      body: TabBarView(
      	// 禁止手势滑动
        physics: NeverScrollableScrollPhysics(),
        controller: _controller,
        children: tabs.map((Tab tab) => Center(
            child: Text(tab.text.toString()),
          )).toList(),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _controller.dispose();
  }
}
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