【Flutter】二十三、Flutter常用组件——抽屉(侧边栏)Drawer

最新推荐文章于 2025-05-07 09:00:00 发布

原创

最新推荐文章于 2025-05-07 09:00:00 发布 · 5.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #Drawer #抽屉 #Scaffold.of(context).openDrawer()

一、Drawer构造器
二、侧边栏的隐藏及显示

使用Scaffold控件的drawer和endDrawer可以实现左侧边栏及右侧边栏。侧边栏默认隐藏，可通过手指滑动或点击事件呼出侧边栏。

一、Drawer构造器

Drawer构造器十分简单：

Drawer({
   
   
    Key key,
    this.elevation = 16.0, // 侧边阴影范围
    this.child, // 
    this.semanticLabel,
  })

Flutter提供了UserAccountsDrawerHeader控件可用来作为Drawer的头部，可以更为方便地进行布局，UserAccountsDrawerHeader展示如下：
在这里插入图片描述
示例源码：

import 'package:flutter/material.dart';

class DrawerDemo extends StatelessWidget{
   
   
  @override
  Widget build(BuildContext context) {
   
   
    // TODO: implement build
    return Drawer(
      elevation: 16.0,
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              UserAccountsDrawerHeader(
                accountName: Text('name:xxxx'),
                accountEmail: Text('email:[email protected]'),
                currentAccountPicture: CircleAvatar(backgroundImage: AssetImage('assets/images/account_picture.jpeg'),),
                otherAccountsPictures: <Widget>[
                  CircleAvatar(backgroundImage: AssetImage('assets/images/account_picture.jpeg'