Flutter學習之Dawer抽屜組件與Floating Button集成

簡介

• Drawer 組件可以實現類似抽屜拉出推入的效果，一般是製作從側邊欄拉出導航面板。通常 Drawer 是和 ListView 組件組合使用的。
• Floating Button 對應一個圓形圖標按鈕， 懸停在內容之上，以展示應用程序中的主要動作，所以非常醒目。

實現的效果

 

 詳細說明

Drawer 組件可以添加頭部效果，用以下兩個組件可以實現：

• Drawer Header ： 展示基本信息。

DrawerHeader 組件屬性說明

屬性名	類型	說明
decoration	Decoration	header 區域的 decoration ，通常用來設置背景顏色或者背景圖片
curve	Curve	如果 decoration 發生了變化，則會使用curve 設置的變化曲線和 duration 設置的動因時間來做一個切換動畫
child	Widget	Header 裏面所顯示的內容控件
padding	EdgeInsetsGeometry	Header 裏面內容控件的 padding 值，如果 child 爲 null，則這個值無效
margin	EdgeInsetsGeometry	Header 四周的間隙

• UserAccountsD rawerHeader ： 展示用戶頭像、用戶名、Email 等信息。

UserAccountsDrawerHeader 詳細說明

屬性名	類型	說明
margin	EdgeInsetsGeometry	Header 四周的間隙
decoration	Decoration	header 區域的 decoration ，通常用來設置背景顏色或者背景圖片
currentAccountPicture	Widget	用來設置當前用戶的頭像
otherAccountsPictures	List<Widget>	用來設置當前用戶其他賬號的頭像
accountName	Widget	當前用戶的名字
accountEmail	Widget	當前用戶的Email
onDetailsPressed	VoidCalIback	當accountN ame 或者acco untEmail 被點擊的時候所觸發的回調函數，可以用來顯示其他額外的信息

具體實現

我們將需要展示出來的兩個組件 floatingButton 與 drawer 組件單獨出來，然後放置到需要展示的組件上面（當前的APP），這樣子避免所有的代碼寫在一起，方便於維護與閱讀。

創建一個 FloatingButton 組件

// 將浮動按鈕抽取爲單獨的一個 widget 
class FloatingButton extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
     return new Builder(builder: (BuildContext context){
        return new FloatingActionButton(
          child: const Icon(Icons.add),
          // 提示信息
          tooltip: "請點擊 FloatingActionButton",
          foregroundColor: Colors.white,    // 前景色
          backgroundColor: Colors.blue,     // 背景色
          elevation: 10.0,                  // 未點擊陰影值
          highlightElevation: 10.0,         // 點擊陰影值
          onPressed: (){
            Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('瞎點擊')));
            
          },
          mini: false,                      // 如果設置爲true 圖標顯示會特別小
          shape: new CircleBorder(),        // 圓形邊
          isExtended: true,
        );
      },); 
   }
}

創建一個 DrawerWidget 組件

// 將 drawer 抽屜組件抽取爲一個單獨的 widget
class DrawerWidget extends StatelessWidget{

  final String imageUrl;
  // 圖片展示的地址從外面傳入
  const DrawerWidget(this.imageUrl);

  @override
  Widget build(BuildContext context){
    return new Drawer(
        child: ListView(
          children: <Widget>[
            // 設置用戶信息 頭像、用戶名、Email 等
            UserAccountsDrawerHeader(
              accountName: new Text('Wayfreem'),
              accountEmail: new Text('[email protected]'),
              // 設置當前的頭像
              currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage(imageUrl),),
              onDetailsPressed: (){ print('瞎JB點擊'); },

              // 屬性本來是用來設置當前用戶的其他賬號的頭像，這裏用來當 QQ 二維碼圖片展示
              otherAccountsPictures: <Widget>[new Container( child: Image.network(imageUrl),)],
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.color_lens),),
              title: Text("個性裝扮"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.photo),),
              title: Text("我的相冊"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wifi),),
              title: Text("免流量特權"),
            ),
            
          ],  
        ),
      );
  }
}

最後拼接到一起

void main() => runApp(new MaterialApp(
  title: 'Drawer 抽屜組件',
  home: new LayoutDemo(),
));

class LayoutDemo extends StatelessWidget{

  String imageUrl = 'https://b-ssl.duitang.com/uploads/item/' +
        '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Drawer 抽屜組件'),),
      drawer: new DrawerWidget(imageUrl),
      // 主體區域放置一個文本顯示
      body: Center(
        child: Text('floating button', style: new TextStyle(fontSize: 28),),
      ),

      // 放置一個浮動的按鈕
      floatingActionButton: FloatingButton(),
      // 浮動按鈕的放置位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );
  }
}

附完整的代碼

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

void main() => runApp(new MaterialApp(
  title: 'Drawer 抽屜組件',
  home: new LayoutDemo(),
));

class LayoutDemo extends StatelessWidget{

  String imageUrl = 'https://b-ssl.duitang.com/uploads/item/' +
        '201602/15/20160215235057_EU3tS.thumb.700_0.jpeg';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Drawer 抽屜組件'),),
      drawer: new DrawerWidget(imageUrl),
      // 主體區域放置一個文本顯示
      body: Center(
        child: Text('floating button', style: new TextStyle(fontSize: 28),),
      ),

      // 放置一個浮動的按鈕
      floatingActionButton: FloatingButton(),
      // 浮動按鈕的放置位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );
  }
}

// 將 drawer 抽屜組件抽取爲一個單獨的 widget
class DrawerWidget extends StatelessWidget{

  final String imageUrl;

  const DrawerWidget(this.imageUrl);

  @override
  Widget build(BuildContext context){
    return new Drawer(
        child: ListView(
          children: <Widget>[
            // 設置用戶信息 頭像、用戶名、Email 等
            UserAccountsDrawerHeader(
              accountName: new Text('Wayfreem'),
              accountEmail: new Text('[email protected]'),
              // 設置當前的頭像
              currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage(imageUrl),),
              onDetailsPressed: (){ print('瞎JB點擊'); },

              // 屬性本來是用來設置當前用戶的其他賬號的頭像，這裏用來當 QQ 二維碼圖片展示
              otherAccountsPictures: <Widget>[new Container( child: Image.network(imageUrl),)],
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.color_lens),),
              title: Text("個性裝扮"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.photo),),
              title: Text("我的相冊"),
            ),
            new ListTile(
              leading: new CircleAvatar(child: Icon(Icons.wifi),),
              title: Text("免流量特權"),
            ),
            
          ],  
        ),
      );
  }
}

// 將浮動按鈕抽取爲單獨的一個 widget 
class FloatingButton extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
     return new Builder(builder: (BuildContext context){
        return new FloatingActionButton(
          child: const Icon(Icons.add),
          // 提示信息
          tooltip: "請點擊 FloatingActionButton",
          foregroundColor: Colors.white,    // 前景色
          backgroundColor: Colors.blue,     // 背景色
          elevation: 10.0,                  // 未點擊陰影值
          highlightElevation: 10.0,         // 點擊陰影值
          onPressed: (){
            Scaffold.of(context).showSnackBar(new SnackBar(content: new Text('瞎點擊')));
            
          },
          mini: false,                      // 如果設置爲true 圖標顯示會特別小
          shape: new CircleBorder(),        // 圓形邊
          isExtended: true,
        );
      },); 
   }
}