Flutter的TabController和bottomNavigationBar组合使用_flutter tabcontroller

使用这两个组件可以快速搭建一个普通App的基本骨架，剩下的就是添加内容了。

废话不多说，直接上效果。

• 之前，学Andoid使用的组件那么费劲，又是fragment，又是Activity。使用TabLayout，在那使劲搭建，没想到Flutter这么简洁，感觉自己像个蠢蛋。但是，yysy，这个编译好慢。代码如下(全部，懒得重新创建文件放首页的内容了)：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  static const String _title = "Flutter Code Sample";

  @override
   Widget build(BuildContext context){
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

第一个大框架的外部创建Widget
class MyStatefulWidget extends StatefulWidget{
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _MyStatefulWidgetState();
}

///最外面的框架的结构
class _MyStatefulWidgetState extends State<MyStatefulWidget>{
  int _selectedIndex = 0;
  static List<Widget> _widget = <Widget>[
    MyStatefulWidget1(),//首页的内容
    Text(
      'index0 :首页',
    ),
    Text(
      'index0 :首页',
    ),
    Text(
      'index0 :首页',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widget.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text(
                "首页",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.tv),
            title: Text(
                "频道",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.message),
            title: Text(
                "动态",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shop),
            title: Text(
                "会员购",
              style: TextStyle(
                color: Colors.black
              ),
            ),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber,
        onTap: _onItemTapped,
      ),
    );
    }
  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;
    });
  }
}

///这是嵌入的首页的内容
///创建的工具
class MyStatefulWidget1 extends StatefulWidget{
  MyStatefulWidget1({Key key}) : super(key: key);

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

///这是首页的内容
class MyStatefulWidgetState1 extends State<MyStatefulWidget1> with SingleTickerProviderStateMixin{
  TabController _tabController;

  void initState(){
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("主页"),
        bottom: TabBar(
          tabs:<Widget> [
            Tab(
              text: '热点',
            ),
            Tab(
              text: '体育',
            ),
            Tab(
              text: '科技',
            ),
          ],
          controller: _tabController,
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(child: Text('热点')),
          Center(child: Text('体育')),
          Center(child: Text('科技'))
        ],
      ),
    );

  }
  @override
  void dispose() {
    // TODO: implement dispose
    _tabController.dispose();
    super.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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154