flutter bottomNavigationBar使用

主类

import 'package:flutter/material.dart';
import 'bottompage/homePage.dart';
import 'bottompage/recommendPage.dart';
import 'bottompage/personalPage.dart';

/*
 * bottomNavigationBar使用
 */
void main() {
  runApp(MyApp());
}

//自定组件就是类
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Tabs(),
    );
  }
}

/*
 * 底部tab抽离
 */
class Tabs extends StatefulWidget {
  @override
  _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs> {
  //选中的条目
  var _currentIndex = 0;

  //tab对应的body页面
  var _pageList = [HomePage(), RecommendPage(), PersonalPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("flutter bottomNavigationBar使用"),
      ),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.red,
        currentIndex: this._currentIndex,
        items: [
          BottomNavigationBarItem(label: "首页", icon: Icon(Icons.home)),
          BottomNavigationBarItem(label: "推荐", icon: Icon(Icons.recommend)),
          BottomNavigationBarItem(label: "我的", icon: Icon(Icons.person))
        ],
        onTap: (value) {
          setState(() {
            this._currentIndex = value.toInt();
          });
        },
      ),
    );
  }
}

首页

import 'package:flutter/material.dart';

/*
 * 首页
 */
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '首页',
        style: TextStyle(fontSize: 30.0),
      ),
    );
  }
}

推荐页

import 'package:flutter/material.dart';

/*
 * 推荐页面
 */
class RecommendPage extends StatefulWidget {
  @override
  _RecommendPageState createState() => _RecommendPageState();
}

class _RecommendPageState extends State<RecommendPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '推荐',
        style: TextStyle(fontSize: 30.0),
      ),
    );
  }
}

我的页面

import 'package:flutter/material.dart';

/*
 * 我的页面
 */
class PersonalPage extends StatefulWidget {
  @override
  _PersonalPageState createState() => _PersonalPageState();
}

class _PersonalPageState extends State<PersonalPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '我的',
        style: TextStyle(fontSize: 30.0),
      ),
    );
  }
}