Flutter 底部導航——BottomNavigationBar | 掘金技術徵文

時間 2019-11-24

標籤 flutter 底部導航 bottomnavigationbar 技術徵文简体版

原文原文鏈接

前言

Google推出flutter這樣一個新的高性能跨平臺（Android，ios）快速開發框架以後，被業界許多開發者所關注。我在接觸了flutter以後發現這個確實是一個好東西，好東西固然要和你們分享，對吧。ios

今天要跟你們分享的是底部導航功能的實現。我認爲flutter的就是在傳達一種最簡設計，一個部件只關注它自己，達到低耦合高內聚。因此本文講解底部導航將只關注該功能的實現，並對佈局思路進行介紹。git

你將學到什麼

如何將部件拆分
如何構建flutter佈局
如何建立底部導航

首先讓你們看看效果。 github

這是一個最簡單的底部導航案例，我不但願引入過多其餘東西，把初學者的腦子搞得很亂（這也是我在學習中所遇到的）。

創建佈局

第一步：繪製佈局視圖

將佈局分解爲基本元素：數組

頁面是由哪些元素構成的
哪些控件會由於用戶的交互而發生變化，哪些不會

在這個應用中咱們指望可以經過點擊底部導航欄就能切換上面的整個頁面。這個行爲觸發了頁面的刷新。

這裏咱們須要思考一個問題，刷新的範圍在哪裏？markdown

用過手機app的同窗都知道，咱們能夠點擊底部導航欄，底部是不會刷新的，而刷新的只有上面部分。因此咱們能夠把整個頁面拆成兩部分。app

第一個部分是橘色框裏的頁面部分，第二個部分是咱們底部的導航器部分。而導航器是一直不變的，因此導航器應該是在它們之中處於父級widget層次。框架

第二步：開始構造底部導航

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'HOME',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Email',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'PAGES',
                style: TextStyle(color: _bottomNavigationColor),
              )),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'AIRPLAY',
                style: TextStyle(color: _bottomNavigationColor),
              )),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
} 
複製代碼

咱們這裏使用了Scaffold佈局，它默認提供了一個bottomNavigationBar的屬性，咱們在這裏給它一個BottomNavigationBar,並在這個BottomNavigationBar中放了四個BottomNavigationBarItem（一下簡稱item）。每一個item就是底部的一個導航按鈕。ide

BottomNavigationBar的items是一個數組，那麼就會存在下標。BottomNavigationBar爲咱們提供了一個currentIndex屬性，默認是0,咱們進去看看這個方法。佈局

/// The index into [items] of the current active item.
  final int currentIndex;
複製代碼

currentIndex表明了當前再items中被選中的index。post

BottomNavigationBar還提供了一個onTap方法。咱們再看看這個方法。

/// The callback that is called when a item is tapped.
  /// The widget creating the bottom navigation bar needs to keep track of the
  /// current index and call `setState` to rebuild it with the newly provided
  /// index.
  final ValueChanged<int> onTap;
複製代碼

當底部導航的一個item被點擊時，它會調用此方法，並傳入當前item的index值，這樣就能改變焦點到當前的index上的item了。

咱們來看看效果：

建立切換頁面

而後咱們須要分別建立四個頁面，對映四個item，因爲四個頁面極爲類似這裏只放一個。建議你們對這四個頁面分別建立一個dart文件。

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HOME'),
      ),
    );
  }
}
複製代碼

每一個頁面都是一個Scaffold佈局，有一個appBar。

將頁面顯示在界面上

咱們再回到底部導航這個控件中。因爲咱們是經過currentIndex這個變量來控制跳轉的，頁面要想同步也必須依賴於這個變量。這裏咱們使用一個List來與items對應。

List<Widget> pages = List<Widget>();
  final _bottomNavigationBarItemColor = Colors.teal;
  int _currentIndex = 0;

  @override
  void initState() {
    pages
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(AlarmsScreen())
      ..add(ProfileScreen());
  }
複製代碼

而後讓咱們的BottomNavigation的Scaffold佈局中body部分爲List中的頁面。

body: pages[_bottomNavigationIndex],
複製代碼

咱們讓_currentIndex來控制咱們到底再body這個位置上顯示哪一個頁面。這樣就可以經過Tap咱們的bottomNavigationItem來達到控制頁面跳轉的做用啦。