Flutter--DrawerLayout

Drawer 側邊欄


drawer: Drawer( 
    child: Text('左側邊欄'), 
),
endDrawer: Drawer( 
child: Text('右側側邊欄'), 
),

DrawerHeader

drawer: Drawer(
          child: Column(
            children: <Widget>[

              Row(
                children: <Widget>[
                  Expanded(
                    child: DrawerHeader(
                      child: Text("你好flutter"),
                      decoration:BoxDecoration(
                        color: Colors.yellow,
                        image: DecorationImage(
                          image: NetworkImage("https://profile.csdnimg.cn/B/0/A/1_qq_39424143"),
                          fit:BoxFit.cover,
                        )
                        
                      )
                    )
                  )
                ],
              ),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home)
                ),
                title: Text("我的空間"),
              ),
                Divider(),
               ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.people)
                ),
                title: Text("用戶中心"),
              ),
              Divider(),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.settings)
                ),
                title: Text("設置中心"),
              ),
                Divider(),
            ],
          ),

UserAccountsDrawerHeader效果較佳

屬性 釋義
decoration 設置背景樣式
accountName 賬戶名稱
accountEmail 賬戶郵箱
currentAccountPicture 用戶頭像
otherAccountsPictures 用來設置當前用戶其他賬戶頭像
drawer: Drawer(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
              child: UserAccountsDrawerHeader(
                accountName:Text("wjxbless"),
                accountEmail: Text("[email protected]"),
                currentAccountPicture: CircleAvatar(
                  backgroundImage: NetworkImage("https://profile.csdnimg.cn/B/0/A/1_qq_39424143"),
                ),
                decoration:BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage("http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23269_s.jpg"),
                      fit:BoxFit.cover,
                    )


                ),
              )
          )
        ],
      ),
      ListTile(
        leading: CircleAvatar(
            child: Icon(Icons.home)
        ),
        title: Text("我的空間"),


      ),
      Divider(),
      ListTile(
        leading: CircleAvatar(
            child: Icon(Icons.people)
        ),
        title: Text("用戶中心"),
        onTap: (){
          Navigator.of(context).pop();  // 點擊後收起抽屜
          Navigator.pushNamed(context, '/user');
        },
      ),
      Divider(),
      ListTile(
        leading: CircleAvatar(
            child: Icon(Icons.settings)
        ),
        title: Text("設置中心"),
      ),
      Divider(),
    ],
  ),
),

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章