20個Flutter實例視頻教程-第02節: 底部導航欄製做-2

 

視頻地址：

https://www.bilibili.com/video/av39709290?p=2

博客地址：

https://jspang.com/post/flutterDemo.html#toc-4df

 

新建pages頁面裏面新建：home_screen.dart

內容比較簡單

分別複製三個dart組件出來。而後分別改更名字便可，

 

裏面的內容分別作下修改

引用四個頁面：

 

動態的組件就是要維護他的state

重寫初始化狀態的方法：initState方法

重寫以前 如今上面聲明 兩個變量

_currentIndex當前索引用來切換按鈕的時候

在聲明一個list用來存儲4個頁面，4個頁面就是widget

這裏把四個頁面裝入到數組list裏面，用的是 ..add這個新語法

誰用點點的返回的就是誰。list當前用點點去add返回的仍是list。因此後面咱們能夠一直用點點去給list增長數組內容。

 

這時候重寫咱們的初始化狀態方法已經寫完了。

 

而後咱們的body裏面就顯示list的當前索引的頁面對象。

下面增長BottomNavigationBar的響應事件：
onTap事件，這裏的參數int index是flutter自帶的

 

 

運行效果

 

q退出，而後從新flutter run 啓動項目

 

 

 

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 {
  @override
  _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(
              'airplay',
              style:TextStyle(color:_BottomNavigationColor)
            )
          ),
        ],
        currentIndex: _currentIndex,//表示哪個高亮了
        onTap: (int index){
          setState(() {
           _currentIndex=index; 
          });
        },
      ),
    );
  }
}

bottom_navigation_widget.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'),),
    );
  }
}

home_screen.dart

 

 

import 'package:flutter/material.dart'; 

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

email_screen.dart