Flutter之抽屜元件drawer,設定drawer寬度——Flutter基礎系列

阿新 • • 發佈：2020-12-20

需求：

抽屜元件drawer的實現。

效果圖:

一、側邊欄的實現

return Scaffold(
  appBar: AppBar( 
    title: Text("側邊欄"), 
  ),
  drawer: Drawer( 
    child: Text('左側邊欄'), 
  ),
  endDrawer: Drawer( 
    child: Text('右側邊欄'), 
  ),
);

在 Scaffold 元件裡面傳入 drawer 引數可以定義左側邊欄，傳入 endDrawer 可以定義右側邊欄。側邊欄預設是隱藏的，我們可以通過手指滑動顯示側邊欄，也可以通過點選按鈕顯示側邊欄。

二、Flutter DrawerHeader

屬性	描述
decoration	設定頂部背景顏色
child	配置子元素
padding	內邊距
margin	外邊距

三、Flutter UserAccountsDrawerHeader

屬性	描述
decoration	設定頂部背景顏色
accountName	賬戶名稱
accountEmail	賬戶郵箱
currentAccountPicture	使用者頭像
otherAccountsPictures	用來設定當前賬戶其他賬戶頭像
margin	外邊距

四、自定義點選事件開啟側邊欄：

class _drawerState extends State<drawer> {
  //建立key
  GlobalKey<ScaffoldState> _globalKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text("側邊欄"),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment:  MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("點選彈出左側側邊欄"),
              onPressed: (){    //點選事件
                _globalKey.currentState.openDrawer();
              },
              color: Colors.blue,
            ),
            SizedBox(width: 20,),
            RaisedButton(
              child: Text("點選彈出右側側邊欄"),
              onPressed: (){    //點選事件
                _globalKey.currentState.openEndDrawer();
              },
              color: Colors.blue,
            ),
          ],

        ),
      ),
      drawer: Drawer(
        //左側側邊欄
       
      ),
      endDrawer: Container(	//顯示右側 側邊欄
        width: 200,	//顯示側邊欄的寬度
        color: Colors.white,	//背景顏色
        child: ListView(
          children: <Widget>[
          ],
        ),
      ),
    );
  }


}

通過_globalKey.currentState.openDrawer();和_globalKey.currentState.openEndDrawer();來開啟左右兩側的側邊欄

五、收起側邊欄

 Navigator.of(context).pop();   //隱藏側邊欄

六、自定義側邊欄寬度：

 endDrawer: Container(	//顯示右側 側邊欄
        width: 200,	//顯示側邊欄的寬度
        color: Colors.white,	//背景顏色
        child: ListView(
          children: <Widget>[
          ],
        ),
      ),

完整程式碼如下：

class _drawerState extends State<drawer> {
  //建立key
  GlobalKey<ScaffoldState> _globalKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text("側邊欄"),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment:  MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("點選彈出左側側邊欄"),
              onPressed: (){    //點選事件
                _globalKey.currentState.openDrawer();
              },
              color: Colors.blue,
            ),
            SizedBox(width: 20,),
            RaisedButton(
              child: Text("點選彈出右側側邊欄"),
              onPressed: (){    //點選事件
                _globalKey.currentState.openEndDrawer();
              },
              color: Colors.blue,
            ),
          ],

        ),
      ),
      drawer: Drawer(
        //左側側邊欄
        child: ListView(
          children: [
            UserAccountsDrawerHeader( //使用者資訊欄
              accountName: Text("小猴猴"),
              accountEmail: Text("[email protected]"),
              currentAccountPicture: CircleAvatar(  //頭像
                backgroundImage: NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608285155199&di=390e6abba282c3d1b420e32cd5e36d93&imgtype=0&src=http%3A%2F%2Fpic1.16xx8.com%2Fallimg%2F150617%2F16xx8.jpg'),
              ),
              otherAccountsPictures: <Widget>[  //其他賬號頭像
                CircleAvatar(backgroundImage: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=277107686,1381510155&fm=26&gp=0.jpg'),),
                CircleAvatar(backgroundImage: NetworkImage("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1048059854,760181649&fm=26&gp=0.jpg"),)
              ],
              onDetailsPressed: (){}, //下拉箭頭
              decoration: BoxDecoration(  //背景圖片
                image: DecorationImage(
                    image: NetworkImage(
                        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2491682377,1019940373&fm=26&gp=0.jpg'
                    ),
                    fit: BoxFit.cover	//圖片不變性裁剪居中顯示
                ),
              ),
            ),

            ListTile(
              title: Text("隱藏側邊欄"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
              onTap: (){
                Navigator.of(context).pop();   //隱藏側邊欄
              },
            ),
            ListTile(
              title: Text("個人中心"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
            ),
            ListTile(
              title: Text("使用者空間"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
            ),
          ],
        ),
      ),
      endDrawer: Container(	//顯示右側 側邊欄
        width: 200,	//顯示側邊欄的寬度
        color: Colors.white,	//背景顏色
        child: ListView(
          children: <Widget>[
          //一些佈局樣式
            DrawerHeader(
              decoration: BoxDecoration(
                  color: Colors.yellow,
                  image:DecorationImage( image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2491682377,1019940373&fm=26&gp=0.jpg"), fit:BoxFit.cover )
              ),
              child: ListView(
                children: <Widget>[
                  Text('我來組成頭部')
                ],
              ),
            ),
            ListTile(
              title: Text("隱藏側邊欄"),
              leading: CircleAvatar(
                  child: Icon(Icons.people)
              ),
              onTap: (){
                Navigator.of(context).pop();   //隱藏側邊欄
              },
            ),
          ],
        ),
      ),
    );
  }


}