題目要求

1

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

2

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

圖3

圖4

圖5

作業參考

說明

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

1

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

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=1;
  List<Widget>page_view_list=[Home2(),Menu(),Setting()];
  @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,
        fixedColor: Colors.blue,
        onTap: _onItemTapped,

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

class Home2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 50.0),
      constraints: BoxConstraints.tightFor(width: 500.0, height: 400.0),
      alignment: Alignment.center,
      child: ListView(
        children: [
          Text('主頁',style: TextStyle(fontSize: 30),textAlign: TextAlign.center,),
          Image.network('http://i.17173cdn.com/2fhnvk/YWxqaGBf/cms3/cNBspsbnyslieuc.jpg'),

        ],
      ),
    );
  }
}

效果圖

0