(17)Flutter BottomNavigationBar

 效果展示

項目結構：

 

main.dart

內容很簡單

import 'package:flutter/material.dart';

import 'home/home.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,
      ),
      initialRoute: "/",
      routes: {
        "/": (context) => Home(),
      },
    );
  }
}

Home裏面也沒有做什麼處理 如果項目定型的話  ndexPage就可以改爲home使用。

因爲home 只做了一層轉發

home.dart

import 'package:flutter/material.dart';

import 'IndexPage.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IndexPage();
  }
}

核心代碼來了IndexPage.dart

因爲要點擊修改頁面狀態 所以使用了 StatefulWidget 

不然沒有setStatus方法

import 'package:flutter/material.dart';
import 'package:flutter_xiaochao/home/page/advisory_page.dart';
import 'package:flutter_xiaochao/home/page/expore_page.dart';
import 'package:flutter_xiaochao/home/page/guide_page.dart';
import 'package:flutter_xiaochao/home/page/mime_page.dart';

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  final List<BottomNavigationBarItem> bottomNavItems = [
    BottomNavigationBarItem(
      backgroundColor: Colors.blue,
      icon: Icon(Icons.home),
      label: "探索",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.green,
      icon: Icon(Icons.message),
      label: "指南",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.amber,
      icon: Icon(Icons.shopping_cart),
      label: "資訊",
    ),
    BottomNavigationBarItem(
      backgroundColor: Colors.red,
      icon: Icon(Icons.person),
      label: "我的",
    ),
  ];
  final pages = [ExplorePage(), GuidePage(), AdvisoryPage(), MinePage()];

  int currentIndex;

  @override
  void initState() {
    currentIndex = 0;
  }

  void _changeIndexPage(index) {
    /*如果點擊的導航項不是當前項  切換 */
    if (index != currentIndex) {
      setState(() {
        currentIndex = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.shifting,
        showSelectedLabels: true,
        showUnselectedLabels: true,
        onTap: _changeIndexPage,
      ),
      body: pages[currentIndex],
    );
  }
}

餘下四個就很簡單

advisory_page.dart

import 'package:flutter/material.dart';

class AdvisoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text("發現"),
    );
  }
}

expore_page.dart

import 'package:flutter/material.dart';

class ExplorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text("探索"),
    );
  }
}

guide_page.dart

import 'package:flutter/material.dart';

class GuidePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text("嚮導"),
    );
  }
}

mime_page.dart

import 'package:flutter/material.dart';

class MinePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Text("我的"),
    );
  }
}