A brief understanding of the drawer attribute app of the basic component Scaffold of Flutter to create an avatar

A brief understanding of the drawer attribute app of the basic component Scaffold of Flutter to create an avatar

Steps to use local image resource files in project development.

1. Create a folder image under the project
insert image description here

2. Put the local image into the images folder
insert image description here
3. Declare the local image resource file in the pubspec.yaml file. The declaration code is as follows:

flutter:
	assets:
		- images/pman.png#-后面有1个空格

Find flutter first:
add declaration code
insert image description here

Click pub get to update without error
insert image description here
insert image description here

onDetailsPressed: Set the callback function that is triggered when accountName or accountEmail is clicked

UserAccountsDrawerHeader(accountName: Text('阿大豆'),
              accountEmail:Text('[email protected]') ,
                currentAccountPicture: CircleAvatar(backgroundImage:AssetImage('images/pman.png') ,
                ),
                onDetailsPressed: (){
    
    print('其实我是阿大豆');},
              ),

Effect: Clicking on the area inside the box will print out the text function
insert image description here
Setting Click the menu icon on the upper left to open the sidebar
insert image description here

insert image description here

//养心殿页面
class yangxdpage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    var select=0;
    return Scaffold(
      /*设置导航栏*/
      appBar: AppBar(
          title: Text('养心殿'),
          // leading: Icon(Icons.menu),
          leading:Builder(builder: (BuildContext context){
    
    
            return IconButton( icon: Icon(Icons.menu),onPressed: (){
    
    
              Scaffold.of(context).openDrawer();
            },);
          }),

          iconTheme: IconThemeData(color: Colors.red, opacity: 30, size: 25),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search, color: Colors.red),
              tooltip: "搜索",
              onPressed: () {
    
    
                print("找折子,,,");
              },
            ),
            IconButton(
                icon: Icon(Icons.add, color: Colors.blue),
                tooltip: "添加",
                onPressed: () {
    
    
                  print('上折子...');
                })
          ]),

      /*设置左侧侧边栏*/
        drawer:Drawer(
          child: ListView(
            children: <Widget>[
              UserAccountsDrawerHeader(accountName: Text('阿大豆'),
              accountEmail:Text('[email protected]') ,
                currentAccountPicture: CircleAvatar(backgroundImage:AssetImage('images/pman.png') ,
                ),
                onDetailsPressed: (){
    
    print('其实我是阿大豆');},
              ),
              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('臣妾做不到啊'),),
            ],
          ),
        ),

      /*设置底部导航栏*/
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.add_a_photo), title: Text('军机处')),
          BottomNavigationBarItem(
              icon: Icon(Icons.center_focus_strong), title: Text('血滴子')),
          BottomNavigationBarItem(
              icon: Icon(Icons.add_alarm_outlined), title: Text('大理寺'))
        ],
        /*设置单击事件*/
        onTap: (value){
    
    
          select=value;
          print(value);
        },
        currentIndex: select,

      ),
      backgroundColor: Colors.yellowAccent,

      body: Center(
        child: GestureDetector(
          onTap: () {
    
    
            print("皇上起驾");
            Navigator.pushNamed(context, "/hougong"); //连接到hougong路由  路由名hougong
          },
          child: Text("起驾后宫"),
        ),
      ), //GestureDetector手势检测组件
    );
  }
}

Guess you like

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