Flutter导航栏实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/villa_mou/article/details/85089230

学了几天的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,),
            title: 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,),
            title: 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,),
            title: 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(
        title: 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
          ),
        ),
      ),
    );
  }
}

最后看下效果;