flutter學習--底部導航欄製作

底部導航欄製作

主入口文件的編寫

import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';

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


class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '底部導航欄',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

StatefulWidget 講解

在編寫BottomNaivgationWidget組件前，我們需要簡單瞭解一下什麼是StatefulWidget.
StatefulWidget具有可變狀態(state)的窗口組件（widget）。使用這個要根據變化狀態，調整State值。
在lib目錄下，新建一個bottom_navigation_widget.dart文件。
它的初始化和以前使用的StatelessWidget不同，我們在Android studio中直接使用快捷方式生成代碼（直接在Android studio中輸入stful）

class name extends StatefulWidget {
  _nameState createState() => _nameState();
}

class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}

上面的代碼可以清楚的看到，使用StatefulWidget分爲兩個部分，第一個部分是繼承與StatefullWidget，第二個部分是繼承於State.其實State部分纔是我們的重點，主要的代碼都會寫在State中。

BottomNaivgationWidget自定義

import 'package:flutter/material.dart';


class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;

  @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(
               'AipPlay',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
         ],
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}

子頁面的編寫

子頁面我們就採用最簡單的編寫了，只放入一個AppBar和一個Center，然後用Text Widget表明即可。
先來寫一個HomeScreen組件，新建一個pages目錄，然後在目錄下面新建home_screen.dart文件。

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text('HOME'),
      ),
      body:Center(
        child: Text('HOME'),
      )
    );
  }
}

有了這個文件剩下的文件就可以複製粘貼，然後改少量的代碼來完成了。

分別建立:

• email_screen.dart
• pages_screen.dart
• airplay_screen.dart

重寫initState()方法

我們要重新initState()方法，把剛纔做好的頁面進行初始化到一個Widget數組中。有了數組就可以根據數組的索引來切換不同的頁面了。這是現在幾乎所有的APP採用的方式。

List<Widget> list = List();
 @override
 void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }

這裏的…add()是Dart語言的…語法，如果你學過編程模式，你一定聽說過建造者模式，簡單來說就是返回調用者本身。這裏list後用了…add()，還會返回list，然後就一直使用…語法，能一直想list裏增加widget元素。 最後我們調用了一些父類的initState()方法。

BottomNavigationBar裏的響應事件

BottomNavigationBar組件裏提供了一個相應事件onTap，這個事件自帶一個索引值index，通過索引值我們就可以和我們list裏的索引值相對應了。

onTap:(int index){
           setState((){
             _currentIndex= index;
           });
         },

全部代碼：

import 'package:flutter/material.dart';
import 'pages/home_screen.dart';
import 'pages/email_screen.dart';
import 'pages/pages_screen.dart';
import 'pages/airplay_screen.dart';

class BottomNavigationWidget extends StatefulWidget {
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List<Widget> list = List();

  @override
  void initState(){
    list
      ..add(HomeScreen())
      ..add(EmailScreen())
      ..add(PagesScreen())
      ..add(AirplayScreen());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       body: list[_currentIndex],
       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(
               'AipPlay',
               style:TextStyle(color:_BottomNavigationColor)
             )
           ),
         ],
         currentIndex:_currentIndex,
         onTap:(int index){
           setState((){
             _currentIndex= index;
           });
         },
         type:BottomNavigationBarType.fixed
       ),
     );
  }
}