Demo2-导航栏(底部+顶部)

示例如下：

未命名.gif

使用BottomNavigationBar作为底部导航栏
代码：

import 'package:flutter/material.dart';
import 'pages/firstPage.dart';
import 'pages/secondPage.dart';
import 'pages/thirdPage.dart';

final icons = [
  Icon(Icons.ac_unit),
  Icon(Icons.threed_rotation),
  Icon(Icons.access_time)
];
final titles = ['第一个', '第二个', '第三个'];
final pageList = [firstPage(), secondPage(), thirdPage()];
int _tabIndex = 0;

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Material App', home: MainPageWidget());
  }
}

class MainPageWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MainPageState();
  }
}

class MainPageState extends State<MainPageWidget> {
  @override
  Widget build(BuildContext context) => _build(context);

  Widget _build(BuildContext context) {
    
    return Scaffold(
      body: pageList[_tabIndex],
      bottomNavigationBar: getBottomNavigationBar(),
    );
  }

  BottomNavigationBar getBottomNavigationBar() {
    print(_tabIndex);
    return BottomNavigationBar(
      items: getBottomNavigationBarItems(),
      type: BottomNavigationBarType.fixed,
      //默认选中首页
      currentIndex: _tabIndex,
      iconSize: 24.0,
      onTap: (index) {       
        setState(() {
        _tabIndex = index;    
        });  
      },
    );
  }

  List getBottomNavigationBarItems() {
    return <BottomNavigationBarItem>[
      new BottomNavigationBarItem(icon: icons[0], title: Text(titles[0])),
      new BottomNavigationBarItem(icon: icons[1], title: Text(titles[1])),
      new BottomNavigationBarItem(icon: icons[2], title: Text(titles[2])),
    ];
  }
}
 

在firstPage.dart文件中使用Tab做导航按钮 TabBarView展示 注意在state类中需要附加SingleTickerProviderStateMixin

class _firstPageState extends State<firstPage>
    with SingleTickerProviderStateMixin {
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }

完整代码

import 'package:flutter/material.dart';

TabController _tabController;

class firstPage extends StatefulWidget {
  firstPage({Key key}) : super(key: key);
  _firstPageState createState() => _firstPageState();
}

class _firstPageState extends State<firstPage>
    with SingleTickerProviderStateMixin {
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('1'),
          bottom: new TabBar(
            tabs: <Widget>[
              new Tab(
                icon: new Icon(Icons.access_alarms),
              ),
              new Tab(
                icon: new Icon(Icons.accessibility),
              ),
              new Tab(
                icon: new Icon(Icons.accessible_forward),
              )
            ],
            controller: _tabController,
          ),
        ),
        body: new TabBarView(
          controller: _tabController,
          children: <Widget>[
            new Center(child: new Text('tab1')),
            new Center(child: new Text('tab2')),
            new Center(child: new Text('tab3')),
          ],
        ),
      ),
    );
  }
}

github地址
https://github.com/qw9685/flutter