Flutter基礎（六）Material組件之BottomNavigationBar、TabBar、Drawer

本文首發於公衆號「後廠村碼農」

ReactNative入門系列 React Native組件 Flutter基礎系列

前言

在上一篇 Flutter基礎（五）Material組件最佳入門（前篇）中，我介紹了Material組件的MaterialApp、Scaffold、AppBar，這篇文章接着介紹Material組件中的BottomNavigationBar、TabBar、Drawer。

1.BottomNavigationBar

BottomNavigationBar是底部的導航欄，用於在3到5個的少許視圖中進行選擇。通常狀況下，導航欄的選項卡由文本標籤、圖標或二者結合的形式組成。 底部導航欄一般與javaScaffold結合使用，它會做爲Scaffold.bottomNavigationBar參數。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();//1
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const List<Widget> _widget = <Widget>[
    Text(
      'Index 0:首頁',
    ),
    Text(
      'Index 1: 通信錄',
    ),
    Text(
      'Index 2: 設置',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar示例'),
      ),
      body: Center(
        child: _widget.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('首頁'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text('通信錄'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.build),
            title: Text('設置'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber,
        onTap: _onItemTapped, //2
      ),
    );
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}
複製代碼

因爲使用的Widget須要在Widget的生命週期中改變狀態，所以MyStatefulWidget繼承了StatefulWidget。註釋1處的createState方法會爲此Widget建立可變狀態。註釋2處的onTap屬性會在點擊其中一個選項卡時調用，它的值由_onItemTapped方法定義，在這個方法中設置當前的索引賦值給_selectedIndex，這樣經過_selectedIndex的值就能夠切換選項卡了。實現的效果以下所示，能夠經過點擊選項卡來切換界面。

2.TabBar

TabBar用於顯示水平的選項卡，和Android中的TabLayout相似。TabBar一般須要配合TabBarView和TabController。其中TabBarView用於顯示與當前所選的選項卡對應的Widget視圖；TabController顧名思義就是TabBarView和TabBar的控制器，是這兩個Widget的橋樑。實現TabController有兩種方式，一種是用系統的DefaultTabController，另外一種是自定義TabController。

2.1 使用DefaultTabController

DefaultTabController這種方式方便快捷，直接新建一個DefaultTabController就能夠了。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyTabController(),
    );
  }
}
class MyTabController extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('DefaultTabController示例'),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                text: '熱點',
              ),
              Tab(
                text: '體育',
              ),
              Tab(
                text: '科技',
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(child: Text('熱點')),
            Center(child: Text('體育')),
            Center(child: Text('科技')),
          ],
        ),
      ),
    );
  }
}
複製代碼

2.2 自定義TabController

若是想要切換動畫或者監聽切換的交互，能夠自定義TabController，須要實現SingleTickerProviderStateMixin。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin {
  TabController _tabController;

  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('自定義TabController'),
        bottom: TabBar(
          tabs: <Widget>[
            Tab(
              text: '熱點',
            ),
            Tab(
              text: '體育',
            ),
            Tab(
              text: '科技',
            ),
          ],
          controller: _tabController,//1
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Center(child: Text('熱點')),
          Center(child: Text('體育')),
          Center(child: Text('科技')),
        ],
      ),
    );
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}
複製代碼

和第一種使用DefaultTabController有兩點不一樣，一個是使用了StatefulWidget，另外一個是在註釋1處將TabBar的controller設置爲新建的TabController。運行效果以下所示，能夠經過滑動界面和點擊選項卡來切換界面。

3.Drawer

Drawer就是抽屜，能夠實現拉出推入的效果，和Android中的DrawerLayout相似。Drawer一般與Scaffold.drawer屬性一塊兒使用，抽屜的子項一般是ListView，其第一個子項是頭部，頭部主要有兩個Widget能夠實現：

• DrawerHeader:展現基本的信息
• UserAccountsDrawerHeader:展現用戶頭像、用戶名、Email等信息。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _DrawerState createState() => _DrawerState();
}

class _DrawerState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer例子'),
      ),
      drawer: _drawer,
    );
  }
  get _drawer => Drawer(
        child: ListView(//1
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('劉望舒'),
              accountEmail: Text('liuwangshu.gmail.com'),
              currentAccountPicture: CircleAvatar(
                child: Text('X'),
              ),
            ),
            ListTile(
              leading: Icon(Icons.local_post_office),
              title: Text('郵件'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('設置'),
            )
          ],
        ),
      );
}

複製代碼

跟以往例子不一樣的是，因爲drawer屬性的代碼比較多，爲了提升可讀性，我將drawer屬性的值抽取出來，經過getter的形式進行獲取。註釋1處能夠看出Drawer的子項爲ListView，ListView的經過ListTile來顯示每個列表項。註釋2使用的是UserAccountsDrawerHeader，能夠很輕鬆的設置用戶的姓名、郵箱、用戶圖片等。效果以下圖所示：

總結

加上上一篇文章，我已經介紹了Material組件中應用程序結構和導航分類中的大部分Widget，另外Material組件所包含的其餘的Widget，本系列就不介紹了，想要了解的能夠查看文檔：flutter.dev/docs/develo…

---

這裏不只分享大前端、Android、Java等技術，還有程序員成長類文章。