看完flutter的基礎(chǔ)資料扣囊，準備開始做一個簡單的demo練練手，記錄下練習效果悔橄。

1靶累、創(chuàng)建頁面

先創(chuàng)建幾個界面類，作為主頁面用來顯示(創(chuàng)建三到四個橄维，代碼直接拷貝尺铣，修改下類名和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、創(chuàng)建導航類

創(chuàng)建一個底部導航類争舞，本次使用BottomNavigationBar來作為應(yīng)用的導航

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遭贸、頁面跳轉(zhuǎn)

本次使用的是系統(tǒng)自帶的方法
跳轉(zhuǎn)到下一頁面

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

返回上一頁面

Navigator.pop(context);

因為對各種控件和方法不太熟悉戈咳，暫時使用的都是系統(tǒng)自帶方法，等熟悉后再自定義一些公共類之類的來提高開發(fā)效率

練習demo地址: https://github.com/liuxiangsheng/flutter_bottomNavigate