日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

Flutter中抽屜組件Drawer使用詳解_Android

作者：小公舉plum ? 更新時(shí)間： 2022-05-25 編程語(yǔ)言

本文實(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: [
? ? ? ? ? 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: [
? ? ? ? ? UserAccountsDrawerHeader(
? ? ? ? ? ? accountName: Text('username'),
? ? ? ? ? ? accountEmail: Text('username@163.com'),
? ? ? ? ? ? currentAccountPicture: CircleAvatar(
? ? ? ? ? ? ? child: Icon(Icons.home),
? ? ? ? ? ? ),
? ? ? ? ? ? onDetailsPressed: (){},
? ? ? ? ? ? otherAccountsPictures: [
? ? ? ? ? ? ? CircleAvatar(
? ? ? ? ? ? ? ? child: Icon(Icons.settings)
? ? ? ? ? ? ? ),
? ? ? ? ? ? ],
? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? color: Colors.green
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? ? ListTile(
? ? ? ? ? ? title: Text('設(shè)置'),
? ? ? ? ? ? leading: Icon(Icons.settings),
? ? ? ? ? ? trailing: Icon(Icons.arrow_forward_ios)
? ? ? ? ? )
? ? ? ? ]
? ? ? )
? ? );
? }
}

原文鏈接：https://blog.csdn.net/sinat_38328891/article/details/104360312

欄目分類(lèi)
最近更新