Flutter之底部导航栏和顶部Tab切换

先上效果图，页面贼丑，但功能正确！

在简单的单页面中会只用一个dart文件去写Row、Column、Container等Widgets。
而在复杂的应用中，单单一个页面是不够，根据不同的需要，组件化Class类复用。
首先可以根据tab的个数创建对应的Dart页面。

底部导航栏

红色圈出的是pages文件夹下bottom Tabs 4个tab文件。

//book_page.dart
import 'package:flutter/material.dart'; //每个新建的都要引入

class Book extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Center(
      child: Text('Book'),
    );
  }
}

//main.dart
//1.引入4个tab页面-相对路径和绝对路径都可以
import 'pages/home.page.dart';
import 'pages/book_page.dart';
import 'pages/movie_page.dart';
import 'pages/music_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter  Router',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: Homes(),//页面
      //路由表设置
      routes: <String, WidgetBuilder>{
        '/Second':(BuildContext context) => new SecondPage(),
      },
    );
  }
}

//2.
class Homes extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomesState();
  }
}
//3.List<Widget>存放你的页面
//List<BottomNavigationBarItem>存放底部图标
//底部导航栏有几个图标，那么就需要添加几个BottomNavigationBarItem。不过最好不要添加过多的底部导航，最多5个。一般应该没有超过5个图标的吧。
class _HomesState extends State<Homes> {
  int _currentIndex = 0;
   final List<Widget> _children = [Home(), Book(), Music(), Movie()];

  final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.book),
        title: Text('Book'),
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_video),
        title: Text('Music'),
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.movie),
        title: Text('Movie'),
        ),
  ];
   @override
  Widget build(BuildContext context) {
    return Scaffold( //构建底部导航，并添加点击事件
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: onTabTapped,
        currentIndex: _currentIndex,//点击索引
        items: _list,
      ),
      body: _children[_currentIndex],
    );
  }
//点击事件
  void onTabTapped(int index) {
    //通过setState告诉Scaffold，你点击了哪一个，它在显示哪一个了
    setState(() {
      _currentIndex = index;
    });
  }
}

顶部导航栏

绿色圈出的是pages文件夹下top Tabs 3个tab文件。

import 'package:flutter/material.dart'; //依旧引入
import 'tab_bike.dart';
import 'tab_car.dart';
import 'tab_transit.dart';

当我们切换 Tab 导航栏时，Tab 的内容要跟着发生改变，这个就是需要 TabCOntroller 来完成的。想要简单地实现，使用 DefaultTabController 就可以了。

DefaultTabController(
  // The number of tabs / content sections we need to display
  length: 3,
  child: // See the next step!
);

Tab的位置，这里的是放在了title的位置。TabBar:Tab (Icon / title )，TabBarView:Tab 页的内容

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new DefaultTabController(//DefaultTabController
      length: 3,
      child: Scaffold(
      appBar: AppBar(
        title: TabBar(
          tabs: <Widget>[
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
        )
      ),
      body: TabBarView(
        children: <Widget>[
          Container(
            child: TabCar(), //TabCar对应tab_car.dart的Class name
          ),
          Container(
            child: TabTransit(),//TabCar对应tab_transit.dart的Class name
          ),
          Container(
            child: TabBike(),//TabCar对应tab_bike.dart的Class name
          ),
        ],
      ),
    ),
    );
  }
}

这里贴出tab_bike.dart的代码

import 'package:flutter/material.dart';

class TabBike extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(Icons.directions_bike),
          Text('TabBike')
        ],
      ),
    );
  }
}