Flutter导航栏实现

学了几天的flutter,似乎有点感觉了,今天来上手搞一个导航栏,实现类似android里面的ViewPager+Fragment的效果;

二话不说直接上代码;

import \'package:flutter/material.dart\';
import \'package:mou/navigationbar/ActPage.dart\';
import \'package:mou/navigationbar/HomePage.dart\';
import \'package:mou/navigationbar/PersonPage.dart\';

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

class NavigationState extends State<NavigationPage>
    with TickerProviderStateMixin {
  List<Widget> pageData;

  //当前页面
  int currentPosition = 0;

  // 两种动画类型
  BottomNavigationBarType animType = BottomNavigationBarType.fixed;

  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(
              Icons.home,
              color: currentPosition == 0 ? Colors.green : Colors.black87,),
             : new Text(
              \"主页\",
              style: new TextStyle(
                color: currentPosition == 0 ? Colors.green : Colors.black87,
              ),
            ),
          ),

          new BottomNavigationBarItem(
            icon: new Icon(
              Icons.local_activity,
              color: currentPosition == 1 ? Colors.green : Colors.black87,),
             : new Text(\"活动\",
              style: new TextStyle(
                color: currentPosition == 1 ? Colors.green : Colors.black87,
              ),
            ),
          ),

          new BottomNavigationBarItem(
            icon: new Icon(
              Icons.person,
              color: currentPosition == 2 ? Colors.green : Colors.black87,),
             : new Text(
              \"个人中心\",
              style: new TextStyle(
                color: currentPosition == 2 ? Colors.green : Colors.black87,
              ),
            ),
          ),
        ],
        currentIndex: currentPosition,
        type: animType,
        onTap: (index) {
          setState(() {
            currentPosition = index;
          });
        }
    );
    return new Scaffold(
      appBar: new AppBar(
         : new Text(\"navigationBar\"),
      ),
      body: pageData[currentPosition],
      bottomNavigationBar: botNavBar,
    );
  }

  @override
  void initState() {
    super.initState();
    pageData = new List();
    pageData..add(HomePage())..add(ActPage())..add(PersonalPage());
  }
}

Scaffold里面就可以设置navigationBar传入一个BottomNavigationBar 即可

这个navigationbar的动画有两种,默认就是有动画的;

下面是三个widget,类似android里面的三个fragment,只贴一个,意思差不多

import \'package:flutter/material.dart\';

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

class HomeState extends State<HomePage>{
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Center(
        child: new Text(\"主页\",
          style: new TextStyle(
              fontSize: 26.0,
              color: Colors.green
          ),
        ),
      ),
    );
  }
}

最后看下效果;