当前版本 Flutter 3.19.5

前言

Drawer 是Flutter中用于实现抽屉式导航菜单的组件，通常位于屏幕左侧，可以通过滑动或点击按钮打开。

Drawer 常用于放置应用程序的主要导航选项、设置菜单或用户个人资料等内容。

Drawer API

属性

属性一览

• backgroundColor: 抽屉背景颜色
• child: 抽屉的内容
• clipBehavior: 抽屉shape剪裁方式
• elevation: 阴影大小
• semanticLabel: drawer打开和关闭时候的通知信息
• shadowColor: 阴影的颜色
• shape: 抽屉的形状
• surfaceTintColor: 背景表面叠加的颜色
• width: 抽屉的宽度

backgroundColor: 抽屉背景颜色

实现

final Color? backgroundColor;

Drawer(
  backgroundColor: Colors.green,
)

child: 抽屉的内容

通常是 SliverList 类型的组件，如 ListView

实现

final Widget? child;

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: const [
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text(
          'Drawer Header',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        leading: const Icon(Icons.message),
        title: const Text('Messages'),
      ),
      ListTile(
        leading: const Icon(Icons.account_circle),
        title: const Text('Profile'),
      ),
      ListTile(
        leading: const Icon(Icons.settings),
        title: const Text('Settings'),
      ),
    ],
  ),
)

clipBehavior: 抽屉shape剪裁方式

Clip.none 不剪裁

Clip.hardEdge 不进行抗锯齿剪裁

Clip.antiAlias 默认-抗锯齿剪裁

Clip.antiAliasWithSaveLayer 抗锯齿并且合成层剪裁（这种模式不仅有抗锯齿，还分配一个离屏缓存，后续的剪裁都在缓冲区进行）

实现

final Clip? clipBehavior;

Drawer(
  clipBehavior: Clip.hardEdge,
)

elevation: 阴影大小<

默认为 16.0，控制抽屉下方阴影的大小，配合 shadowColor 使用

实现

final double? elevation;

Drawer(
  shadowColor: Colors.red,
  elevation: 64.0,
)

semanticLabel: drawer打开和关闭时候的通知信息

final String? semanticLabel;

Drawer(
  semanticLabel: 'Drawer',
)

shadowColor: 阴影的颜色

配合 elevation 使用

final Color? shadowColor;

Drawer(
  shadowColor: Colors.red,
  elevation: 64.0,
)

shape: 抽屉的形状

final ShapeBorder? shape;

Drawer(
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(256.0))
  ),
  child: ListView(
    padding: EdgeInsets.zero,
    children: const [
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text(
          'Drawer Header',
          style: TextStyle(
            color: Colors.white,
            fontSize: 24,
          ),
        ),
      ),
      ListTile(
        leading: const Icon(Icons.message),
        title: const Text('Messages'),
      ),
      ListTile(
        leading: const Icon(Icons.account_circle),
        title: const Text('Profile'),
      ),
      ListTile(
        leading: const Icon(Icons.settings),
        title: const Text('Settings'),
      ),
    ],
  ),
)

surfaceTintColor: 背景表面叠加的颜色

final Color? surfaceTintColor;

Drawer(
  surfaceTintColor: Colors.red,
)

width: 抽屉的宽度

默认为 304.0

final double? width;

Drawer(
  width: 100,
)

...完...