Flutter之tabBar的实现

import 'package:flutter/material.dart';
import './FirstScreen.dart';
import './SecondScreen.dart';

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => new _RootPageState();
}

class _RootPageState extends State<RootPage> {
  List<Widget> pages = [
    FirstScreen(),
    SecondScreen(),
  ];

  int _currentIndex = 1;
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Scaffold(
        bottomNavigationBar: new BottomNavigationBar(
            onTap: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
            selectedFontSize: 12.0,
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.green,
            currentIndex: _currentIndex,
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: new Image(
                      height: 20,
                      width: 20,
                      image: new AssetImage('assets/tabs/home.png')),
                  activeIcon: new Image(
                      height: 20,
                      width: 20,
                      image: new AssetImage('assets/tabs/home_selected.png')),
                  // ignore: deprecated_member_use
                  title: new Text('订单明细')),
              BottomNavigationBarItem(
                  icon: new Image(
                      height: 20,
                      width: 20,
                      image: new AssetImage('assets/tabs/user.png')),
                  activeIcon: new Image(
                      height: 20,
                      width: 20,
                      image: new AssetImage('assets/tabs/user_selected.png')),
                  // ignore: deprecated_member_use
                  title: new Text('我的商铺'))
            ]),
        body: new Center(
          child: pages[_currentIndex],
        ),
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RootPage(),
    );
  }
}

// SecondScreen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Tab 2 Layout'),
      ),
    );
  }
}

这里介绍几个关键的组件

1、Scaffold(脚手架组件)

Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个接口显示的布局组件元素，都可以使用Scaffold来绘制。

Scaffold常见的属性如下表：

2、BottomNavgationBar（底部导航条组件）

BottomNavgationBar是底部导航条，类似于iOS中的TabbarController,可以很容易的再tab之间切换，大部分APP都采用这种布局方式。
BottomNavgationBar的常见属性如下表：