快捷導(dǎo)航

Flutter中抽屜組件Drawer使用詳解

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

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

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

1、概述

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

【注意】如果沒(méi)有設(shè)置 AppBar 的 leading 屬性，則當(dāng)使用 Drawer 的時(shí)候會(huì)自動(dòng)顯示一個(gè) IconButton 來(lái)告訴用戶有側(cè)邊欄（在 Android 上通常是顯示為三個(gè)橫的圖標(biāo)）。

2、Drawer組件常見(jiàn)屬性

child：Widget類(lèi)型，可以放置任意可顯示對(duì)象
elevation：double類(lèi)型，組件的Z坐標(biāo)的順序

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類(lèi)型，Header里面所顯示的內(nèi)容控件
padding、margin
decoration：Decoration類(lèi)型，header區(qū)域的decoration，通常用來(lái)設(shè)置背景顏色或者背景圖片。

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類(lèi)型，用來(lái)設(shè)置當(dāng)前用戶的頭像
accountName：Widget類(lèi)型，當(dāng)前用戶的名字
accountEmail：Widget類(lèi)型，當(dāng)前用戶的 Email
onDetailsPressed： VoidCallback類(lèi)型，當(dāng) accountName 或者 accountEmail 被點(diǎn)擊的時(shí)候所觸發(fā)的回調(diào)函數(shù)，可以用來(lái)顯示其他額外的信息
otherAccountsPictures：List類(lèi)型，用來(lái)設(shè)置當(dāng)前用戶的其他賬號(hào)的頭像
decoration：Decoration類(lèi)型，header區(qū)域的decoration，通常用來(lái)設(shè)置背景顏色或者背景圖片。
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('設(shè)置'),
? ? ? ? ? ? leading: Icon(Icons.settings),
? ? ? ? ? ? trailing: Icon(Icons.arrow_forward_ios)
? ? ? ? ? )
? ? ? ? ]
? ? ? )
? ? );
? }
}