Flutter中抽屜組件Drawer使用詳解

更新時間：2022年03月23日 09:51:45 作者：小公舉plum

這篇文章主要為大家詳細介紹了Flutter中抽屜組件Drawer使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter中抽屜組件Drawer實現(xiàn)代碼，供大家參考，具體內容如下

1、概述

Scalfold 是 Flutter MaterialApp 常用的布局 Widget，接受一個 drawer屬性，支持配置 Drawer，可以實現(xiàn)從側邊欄拉出導航面板，好處是把一些功能菜單折疊起來，通常Drawer是和Listview組件或者 Column組合使用進行縱向布局。Listview組件是豎排排列的，上下可滑動。

【注意】如果沒有設置 AppBar 的 leading 屬性，則當使用 Drawer 的時候會自動顯示一個 IconButton 來告訴用戶有側邊欄（在 Android 上通常是顯示為三個橫的圖標）。

2、Drawer組件常見屬性

child：Widget類型，可以放置任意可顯示對象
elevation：double類型，組件的Z坐標的順序

import 'package:demo_app/pages/drawer/drawer.dart';
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? return Scaffold(
? ? ? appBar: AppBar(),?
? ? ? body: Container(),?
? ? ? drawer: DrawLayout()
? ? );
? }
}

import 'package:flutter/material.dart';

class DrawLayout extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? return Drawer(
? ? ? child: Text('drawer')
? ? );
? }
}

3、Drawer可以添加頭部效果

DrawerHeader：展示頭部基本信息
UserAccountsDrawerHeader：展示用戶頭像、用戶名、email等信息

4、DrawerHeader常用屬性

child：Widget類型，Header里面所顯示的內容控件
padding、margin
decoration：Decoration類型，header區(qū)域的decoration，通常用來設置背景顏色或者背景圖片。

import 'package:flutter/material.dart';

class DrawLayout extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? return Drawer(
? ? ? child: ListView(
? ? ? ? padding: EdgeInsets.all(0.0),
? ? ? ? children: <Widget>[
? ? ? ? ? DrawerHeader(
? ? ? ? ? ? child: Center(
? ? ? ? ? ? ? child: Text('drawer')
? ? ? ? ? ? ),
? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? color: Colors.blue
? ? ? ? ? ? ),
? ? ? ? ? )
? ? ? ? ]
? ? ? )
? ? );
? }
}

5、UserAccountsDrawerHeader常用屬性

currentAccountPicture：Widget類型，用來設置當前用戶的頭像
accountName：Widget類型，當前用戶的名字
accountEmail：Widget類型，當前用戶的 Email
onDetailsPressed： VoidCallback類型，當 accountName 或者 accountEmail 被點擊的時候所觸發(fā)的回調函數(shù)，可以用來顯示其他額外的信息
otherAccountsPictures：List類型，用來設置當前用戶的其他賬號的頭像
decoration：Decoration類型，header區(qū)域的decoration，通常用來設置背景顏色或者背景圖片。
margin

import 'package:flutter/material.dart';

class DrawLayout extends StatelessWidget {
? @override
? Widget build(BuildContext context) {
? ? return Drawer(
? ? ? child: ListView(
? ? ? ? padding: EdgeInsets.all(0.0),
? ? ? ? children: <Widget>[
? ? ? ? ? UserAccountsDrawerHeader(
? ? ? ? ? ? accountName: Text('username'),
? ? ? ? ? ? accountEmail: Text('username@163.com'),
? ? ? ? ? ? currentAccountPicture: CircleAvatar(
? ? ? ? ? ? ? child: Icon(Icons.home),
? ? ? ? ? ? ),
? ? ? ? ? ? onDetailsPressed: (){},
? ? ? ? ? ? otherAccountsPictures: <Widget>[
? ? ? ? ? ? ? CircleAvatar(
? ? ? ? ? ? ? ? child: Icon(Icons.settings)
? ? ? ? ? ? ? ),
? ? ? ? ? ? ],
? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? color: Colors.green
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? ListTile(
? ? ? ? ? ? title: Text('設置'),
? ? ? ? ? ? leading: Icon(Icons.settings),
? ? ? ? ? ? trailing: Icon(Icons.arrow_forward_ios)
? ? ? ? ? )
? ? ? ? ]
? ? ? )
? ? );
? }
}