当前版本 Flutter 3.19.5
前言
Drawer 是Flutter中用于实现抽屉式导航菜单的组件,通常位于屏幕左侧,可以通过滑动或点击按钮打开。
Drawer 常用于放置应用程序的主要导航选项、设置菜单或用户个人资料等内容。
属性
属性一览
- 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, )
...完...
《Flutter入门: Drawer 详解》留言数:0