Flutter——側邊欄drawer模塊,底部導航欄navigation

題目要求

第一題

Scaffold的drawer和endDrawer屬性可以分別接收一個Widget來作為頁面的左、右抽屜菜單。其效果是從屏幕邊緣滑動出現，通常用於顯示App中的導航鏈接。

一般來講，Drawer由一個ListView組成，第一個元素是DrawerHeader，如在某些聊天軟件中顯示為個人頭像，中間部分由ListTile組成，末尾部分是AboutListTile組件。其一般組成結構如下：

drawer: Drawer(

        child: ListView(

          children: <Widget>[

            UserAccountsDrawerHeader(   ),

            ListTile(    ),

            ListTile(    ),

            ListTile(    ),

            AboutListTile(    )

          ],

        ),

      ),

按照上述結構，在一個新建頁面中使用drawer組件，實現如圖1、圖2所示的效果。

圖1

 

圖2

 

 

 

 

第二題

參照教材P159-P160之示例代碼，實現 BottomNavigationBar組件的比較完整的應用示例——即點擊相應的BottomNavigationBarItem后，在body視口區域顯示對應的自定有頁面。效果見圖3、圖4、圖5所示。

圖3

 

圖4

 

圖5

 作業參考

說明

此次作業只是在原有作業的基礎上添加的，主函數可以向上翻兩篇找到

第一題

第一段外碼為單一頁面，構建了一個包含左側側邊欄模塊的頁面，頁面中的圖片部分為本地圖片，請自行更改，初始化。

 

 

//drawer_demo.dart

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

class PureDrawer extends StatefulWidget {
  @override
  _PureDrawerState createState() => _PureDrawerState();
}

class _PureDrawerState extends State<PureDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child:MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: ListView(
            children: <Widget>[

              UserAccountsDrawerHeader(
                currentAccountPicture: new GestureDetector(
                  onTap: ()=>print('halfgong'),
                  child: new CircleAvatar(
                    backgroundImage: new NetworkImage('https://pic.downk.cc/item/5f31796014195aa5944fd2bd.jpg'),
                  ),
                ),
                accountEmail: Text('[e-mail]'),
                accountName: Text('龔一半'),
                decoration: BoxDecoration(
                  image: new DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage('https://pic.downk.cc/item/5f9e1f771cd1bbb86bf49c90.jpg')),
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/keqing.png'),
                ),
                title: Text('刻晴'),
                subtitle: Text('霆霓快雨'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/barbara.png'),
                ),
                title: Text('芭芭拉'),
                subtitle: Text('閃耀偶像'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/mona.png'),
                ),
                title: Text('莫娜'),
                subtitle: Text('星天水鏡'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/fiechl.png'),
                ),
                title: Text('菲謝爾'),
                subtitle: Text('斷罪皇女！！'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/noelle.png'),
                ),
                title: Text('諾艾爾'),
                subtitle: Text('未受勛之花'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/jean.png'),
                ),
                title: Text('琴'),
                subtitle: Text('蒲公英騎士'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/klee.png'),
                ),
                title: Text('可莉'),
                subtitle: Text('逃跑的太陽'),
              ),
              AboutListTile(
                child: Text('this is a Drawer'),
              )
            ],
          ),
      )
    );
  }
}

 

效果圖

第二題

 第二題需要的是一個包含底部導航欄的頁面，源代碼如下：

//bottom_navigation_bottom.dart


import 'package:flutter/material.dart';
import 'drawer_pure.dart';
import 'package:flutter/services.dart';

class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  int _selectedIndex=0;//頁面選擇參數
  List<Widget>page_view_list=[Home1(),Menu(),Setting()];//聲明頁面列表，參數從0~2，頁面需要另外構造
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Barlten'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.share), onPressed: (){})
        ],
      ),
      drawer: new PureDrawer(),
      body: page_view_list[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('主頁')),//主頁按鈕
          BottomNavigationBarItem(icon: Icon(Icons.format_list_bulleted),title: Text('目錄')),//目錄按鈕
          BottomNavigationBarItem(icon: Icon(Icons.settings),title: Text('設置')),//設置按鈕
        ],
        currentIndex: _selectedIndex,//頁面選擇參數，flutter會自動保存當前頁面的序號至currentIndex
        fixedColor: Colors.blue,//選中的按鈕變色
        onTap: _onItemTapped,//按下后的動作，此處指向_onItem函數，（理應包含一個默認參數，至於這里為什么沒有這個參數，我也不知道）

      ),
    );
  }
  void _onItemTapped(int index){
    setState(() {
      _selectedIndex = index;//按下后，新建一個將頁面參數傳過來的參數值狀態（應該是這樣吧）
    });
  }
  void _onAdd(){

  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 50.0),
      constraints: BoxConstraints.tightFor(width: 500.0,height: 150.0),
      alignment: Alignment.center,
      child: Text('主頁',style: TextStyle(fontSize: 40.0),),
    );
  }
}

class Menu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 50.0),
      constraints: BoxConstraints.tightFor(width: 500.0,height: 150.0),
      alignment: Alignment.center,
      child: Text('目錄',style: TextStyle(fontSize: 40.0),),
    );
  }
}
class Setting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 50.0),
      constraints: BoxConstraints.tightFor(width: 500.0, height: 150.0),
      alignment: Alignment.center,
      child: Text('設置', style: TextStyle(fontSize: 40.0),),
    );
  }
}

效果圖

側邊欄重寫

由於之前的側邊欄沒辦法用，所以這了重寫了一下

//drawer_pure.dart

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

class PureDrawer extends StatefulWidget {
  @override
  _PureDrawerState createState() => _PureDrawerState();
}

class _PureDrawerState extends State<PureDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child:MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: ListView(
            children: <Widget>[

              UserAccountsDrawerHeader(
                currentAccountPicture: new GestureDetector(
                  onTap: ()=>print('halfgong'),
                  child: new CircleAvatar(
                    backgroundImage: new NetworkImage('https://pic.downk.cc/item/5f31796014195aa5944fd2bd.jpg'),
                  ),
                ),
                accountEmail: Text('[e-mail]'),
                accountName: Text('龔一半'),
                decoration: BoxDecoration(
                  image: new DecorationImage(
                      fit: BoxFit.fill,
                      image: NetworkImage('https://pic.downk.cc/item/5f9e1f771cd1bbb86bf49c90.jpg')),
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/keqing.png'),
                ),
                title: Text('刻晴'),
                subtitle: Text('霆霓快雨'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/barbara.png'),
                ),
                title: Text('芭芭拉'),
                subtitle: Text('閃耀偶像'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/mona.png'),
                ),
                title: Text('莫娜'),
                subtitle: Text('星天水鏡'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/fiechl.png'),
                ),
                title: Text('菲謝爾'),
                subtitle: Text('斷罪皇女！！'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/noelle.png'),
                ),
                title: Text('諾艾爾'),
                subtitle: Text('未受勛之花'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/jean.png'),
                ),
                title: Text('琴'),
                subtitle: Text('蒲公英騎士'),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: AssetImage('assets/klee.png'),
                ),
                title: Text('可莉'),
                subtitle: Text('逃跑的太陽'),
              ),
              AboutListTile(
                child: Text('this is a Drawer'),
              )
            ],
          ),
      )
    );
  }
}