Flutter - 創建底部導航欄

之前寫過的一篇文章介紹了 Flutter - 創建橫跨所有頁面的側滑菜單, 這次就一起來學習一下底部導航欄。

底部導航欄在ios平台上非常常見，app store就是這樣的風格。還有就是大家最常用的微信，也是底部導航的。

 

 

 既然這么常見的功能，在Flutter上面也是必不可少的啦。谷歌已經做好了Widget，下面我們就來看一下如何創建一個底部導航欄。

 

 

1. 准備工作

首先創建一個空的Flutter 項目，並且按照圖示結構。創建一個pages文件夾，並新建四個page文件。

這四個pages是用到導航的頁面，也即是說，你點擊底部的一個圖標，就是自動導航到這個頁面，

這四個page結構基本相同，這里只放置home的代碼

import 'package:flutter/material.dart';

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Center(
      child: Text('Home'),
    );
  }
}

 

 

 

2. 添加引用

在main.dart頂部，添加對四個頁面的引用，用相對路徑或者完整的項目路徑

import './pages/home_page.dart';

import './pages/book_page.dart';

import 'package:bottom_nav_bar_test/pages/movie_page.dart';

import 'package:bottom_nav_bar_test/pages/music_page.dart';

 

 

3. 定義一個List<BottomNavigationBarItem>和一個List<Widget>

比如你底部導航欄有幾個圖標，那么就需要添加幾個BottomNavigationBarItem。不過我好像在哪看過，不要添加過多的底部導航，最多5個。一般應該沒有超過5個圖標的吧。

List<Widget>存放你的頁面

List<BottomNavigationBarItem>存放底部圖標

  final List<Widget> _children = [Home(), Book(), Music(), Movie()];

final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.book),
        title: Text('Book'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_video),
        title: Text('Music'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.movie),
        title: Text('Movie'),
        //backgroundColor: Colors.orange
        ),
  ];

 

 

 

4. 構建底部導航，並添加點擊事件

在Scaffold腳手架里面，我們添加基本的

appbar

body，這個是List<Widget>，導航頁面數組

bottomNavigationBar, 設置其type、items、currentIndex，當然還有onTap事件

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: _list,
      ),
      body: _children[_currentIndex],
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

 

_currentIndex需要在前面定義一下，是點擊索引，這樣通過setState告訴Scaffold，你點擊了哪一個，它在顯示哪一個了。

onTap事件，主要用了一下setState方法。

 

 

 

 

5. 一個好玩有趣的參數

大家可能注意到了，我剛才在 BottomNavigationBar里面加了type預定義參數，值為

BottomNavigationBarType.shifting

 如果不加的話，它也是默認。

但是，type也可以為

BottomNavigationBarType.fixed

 

當你設置為fixed模式時，這個時候酒和微信的模式一模一樣了，即icon和title都是固定的。

如果時shifting模式，那么當前選擇的那個圖標就是圖標突出的，並且其他未選擇的不顯示title。

可以嘗試一下。

 

 

 

 

6. 完整代碼

import 'package:flutter/material.dart';

import './pages/home_page.dart';
import './pages/book_page.dart';
import 'package:bottom_nav_bar_test/pages/movie_page.dart';
import 'package:bottom_nav_bar_test/pages/music_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation',
      home: Homes(),
      theme: ThemeData(primaryColor: Colors.orange),
    );
  }
}

class Homes extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomesState();
  }
}

class _HomesState extends State<Homes> {
  int _currentIndex = 0;
  final List<Widget> _children = [Home(), Book(), Music(), Movie()];

  final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
    BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.book),
        title: Text('Book'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.music_video),
        title: Text('Music'),
        //backgroundColor: Colors.orange
        ),
    BottomNavigationBarItem(
        icon: Icon(Icons.movie),
        title: Text('Movie'),
        //backgroundColor: Colors.orange
        ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: _list,
      ),
      body: _children[_currentIndex],
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

 

 

 

7. 結束啦

底部導航欄使用方法並不難，只要按照上述步驟，就可以完成一個屬於自己的底部導航欄。

偷偷的告訴你，你可以在谷歌山谷搜一下微信的圖標集，然后用Flutter做一個高仿微信界面，也是有可能的。

 

 

哦，還有一句，在你點擊底部導航菜單的時候，圖標會自動顯示水波紋效果，也就是InkWell那樣的效果。

Cool😎

比微信還高級呢，哈哈哈