A brief introduction to the left sidebar of the drawer property app of the basic component Scaffold of Flutter
The drawer property is used to define the left sidebar of the application, usually in combination with the List View component.
The attribute value is the common attributes and functions of the Drawer type component Drawer
property name | property value type | Defaults | illustrate |
---|---|---|---|
child | Widget type | Set the displayable object placed by Xu Ya in the left sidebar, which is commonly implemented with ListView | |
elevation | double | 16 | Set the Z coordinate order of components in Materia Design |
The Drawer component can add header effects with the DrawerHeader and UserAccountsDrawerHeader components. Their properties are listed below.
Common properties and functions of DrawerHeader
property name | Types of | Function Description |
---|---|---|
decoration | Decoration | Set the decoration effect of the head area. Usually used to set the background color or background image |
curve | Curve | Set the transition animation effect. If the decoration changes, it will use the change curve set by the curve and the animation time set by the duration to make a switching animation |
child | widget | Set the components displayed in the header area |
padding | EdgeInsetsGeometry | Set the padding value of the header component. If child is null, this value is invalid |
margin | EdgeInsetsGeometry | Sets the gap around the head area |
Common properties and functions of UserAccountsDraweHeader
property name | Types of | illustrate |
---|---|---|
margin | EdgelnsctsGcometry | Set the gap around the head zone city |
decoration | Decoration | Set the decoration effect of the head district city. Usually used to set the background color or background image |
currentAccountPicture | Widget | Set the current user's avatar |
otherAccountsPictures | List | Set the avatar of other accounts of the current user |
accountName | Widget | Set current username |
accountEmail | Widget | Set current user Email |
onDetailsPressed | VoidCallBack | Set the callback function that is triggered when accountName or accountEmail is clicked |
/*设置左侧侧边栏*/
drawer:Drawer(
child: ListView(
children: <Widget>[
ListTile(leading: Icon(Icons.account_balance),title: Text("紫禁城"),subtitle: Text('紫禁城的风水养人'),),
ListTile(leading: Icon(Icons.account_box_rounded),title: Text("雍正"),subtitle: Text('往事暗沉不可追,来日之路光明灿烂'),),
ListTile(leading: Icon(Icons.accessibility_new),title: Text("皇后"),subtitle: Text('死生不复相见'),),
],
),
),