A brief introduction to the left sidebar of the drawer property app of the basic component Scaffold of Flutter

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('死生不复相见'),),
        ],
      ),
    ),

insert image description here

Guess you like

Origin blog.csdn.net/qq_43336158/article/details/123535685
Recommended