Flutter用BottomNavigationBar制作底部导

看完flutter的基础资料，准备开始做一个简单的demo练练手，记录下练习效果。

1、创建页面

先创建几个界面类，作为主页面用来显示(创建三到四个，代码直接拷贝，修改下类名和appbar的属性就可以了)

import 'package:flutter/material.dart';
class KYVMHome extends StatefulWidget {
  @override
  _KYVMHomeState createState() => _KYVMHomeState();
}

class _KYVMHomeState extends State<KYVMHome> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  Widget build(BuildContext context) {
    super.build(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
        backgroundColor: Colors.blue,
      ),
      body: Container(
        color: Colors.blue,
      ),
    );
  }
}

2、创建导航类

创建一个底部导航类，本次使用BottomNavigationBar来作为应用的导航

import 'package:flutter/material.dart';
import 'package:my_test/home/kyvm_home.dart';
import 'package:my_test/message/kyvm_message.dart';
import 'package:my_test/person_center/kyvm_person_center.dart';


class KYVMNavigate extends StatefulWidget {
  @override
  _NavigateState createState() => _NavigateState();
}

class _NavigateState extends State<KYVMNavigate>
  with SingleTickerProviderStateMixin {
    
  final _bottomNavigationColor = Colors.grey;
  final _bottomNavigationSelectColor = Colors.blue;
  int _currentIndex = 0;
  var _controller = PageController(
    initialPage: 0,
  );

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[
          KYVMHome(),
          KYVMMessage(),
          KYVMPersonCenter(),
        ],
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.home,
              color: _bottomNavigationSelectColor,
            ),
            icon: Icon(
              Icons.home,
              color: _bottomNavigationColor,
            ),
            title: Text(
              '首页',
              style: TextStyle(color:_bottomNavigationSelectColor),
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.message,
              color: _bottomNavigationSelectColor,
            ),
            icon: Icon(
              Icons.message,
              color: _bottomNavigationColor,
            ),
            title: Text(
              '消息',
              style: TextStyle(color:_bottomNavigationSelectColor),
            ),
          ),
          BottomNavigationBarItem(
            activeIcon: Icon(
              Icons.person,
              color: _bottomNavigationSelectColor,
            ),
            icon: Icon(
              Icons.person,
              color: _bottomNavigationColor,
            ),
            title: Text(
              '我的',
              style: TextStyle(color:_bottomNavigationSelectColor),
            ),
          ),
        ],
      ),
    );
  }
}

3、修改main.dart

main.dart 是我们程序的入口。就类似于 Java、OC 中的 main() ，作为一个程序的入口。我们将 main.dart 作为程序的启动入口，就不做过多的操作，只是指定去加载我们的导航类。

import 'package:flutter/material.dart';
import 'package:my_test/navigate/kyvm_navigate.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: KYVMNavigate(),
    );
  }
}

4、页面跳转

本次使用的是系统自带的方法
跳转到下一页面

Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => CarLocation()),
 );

返回上一页面

Navigator.pop(context);

因为对各种控件和方法不太熟悉，暂时使用的都是系统自带方法，等熟悉后再自定义一些公共类之类的来提高开发效率

练习demo地址: https://github.com/liuxiangsheng/flutter_bottomNavigate