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

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：小公舉plum ? 更新時間： 2022-05-25 編程語言

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

1、概述

Scalfold 是 Flutter MaterialApp 常用的布局 Widget，接受一個 drawer屬性，支持配置 Drawer，可以實現從側邊欄拉出導航面板，好處是把一些功能菜單折疊起來，通常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區域的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: [
? ? ? ? ? DrawerHeader(
? ? ? ? ? ? child: Center(
? ? ? ? ? ? ? child: Text('drawer')
? ? ? ? ? ? ),
? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? color: Colors.blue
? ? ? ? ? ? ),
? ? ? ? ? )
? ? ? ? ]
? ? ? )
? ? );
? }
}

5、UserAccountsDrawerHeader常用屬性

  • currentAccountPicture：Widget類型，用來設置當前用戶的頭像
  • accountName：Widget類型，當前用戶的名字
  • accountEmail：Widget類型，當前用戶的 Email
  • onDetailsPressed： VoidCallback類型，當 accountName 或者 accountEmail 被點擊的時候所觸發的回調函數，可以用來顯示其他額外的信息
  • otherAccountsPictures：List類型，用來設置當前用戶的其他賬號的頭像
  • decoration：Decoration類型，header區域的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: [
? ? ? ? ? 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('設置'),
? ? ? ? ? ? leading: Icon(Icons.settings),
? ? ? ? ? ? trailing: Icon(Icons.arrow_forward_ios)
? ? ? ? ? )
? ? ? ? ]
? ? ? )
? ? );
? }
}

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

欄目分類
最近更新