Flutter 抽屉组件之Drawer滑动侧边栏

超、凢脫俗 2023-07-17 14:14 9阅读 0赞

##### Drawer配置 #####

以下布局是系统方法,当然可以根据需求自定义布局。

class HomePageSet extends StatefulWidget { 
      HomePageSet({ Key key}) : super(key: key);
    
      @override
      _HomePageSetState createState() => _HomePageSetState();
    }
    
    class _HomePageSetState extends State<HomePageSet> { 
      int curIndex = 0;
    
      List PageList = [
        HomePage(),
        Payment(),
        People(),
      ];
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          child: Scaffold(
            appBar: AppBar(
              title: Text("StatefulWidget,BottomNavigationBar"),
            ),
            body: this.PageList[this.curIndex],
            bottomNavigationBar: BottomNavigationBar(
                currentIndex: curIndex,
                onTap: (int index) { 
                  print(index);
                  setState(() { 
                    this.curIndex = index;
                  });
                },
                iconSize: 40,
                fixedColor: Colors.orange,
                type: BottomNavigationBarType.fixed,
                //配置多个底布菜单
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home), title: Text("首页")),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.payment), title: Text("推荐")),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.people), title: Text("用户中心")),
                ]),
            drawer: Drawer(//左侧侧边栏
              child: Text("hello flutter"),
            ),
            endDrawer: Drawer(//右侧侧边栏
              child: Text("hello flutter 2"),
            ),
          ),
        );
      }
    }

##### Drawer 内容布局 #####

> `DrawerHeader` 自动空出顶部空间

drawer: Drawer(//左侧侧边栏
       child: Column(//设置一个列布局
         children: <Widget>[
           Row(//行布局
             children: <Widget>[
               Expanded(//flex 布局铺满头部
                   child: DrawerHeader(//抽屉头部
                       child: Text("你好flutter"),
                       decoration:BoxDecoration(
                           color: Colors.yellow,//背景颜色
                           image: DecorationImage(//背景图片
                             image: NetworkImage("https://images.com/flut.png"),
                             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` 抽屉头部组件可以包含用户信息数据的头部组件

drawer: Drawer(
       child: Column(
         children: <Widget>[
           Row(
             children: <Widget>[
               Expanded(
                 child: UserAccountsDrawerHeader(//顶部用户信息组件
                   accountName:Text("flutter"),//昵称
                   accountEmail: Text("flutter.org"),//email
                   currentAccountPicture: CircleAvatar(//原型头像
                     backgroundImage: NetworkImage("https://images.com/images/flutter.png"),                        
                   ),
                   decoration:BoxDecoration(     //元素样式 
                     image: DecorationImage(//背景图片
                       image: NetworkImage("https://images.com/images/flutter/2.png"),
                       fit:BoxFit.cover,//充满元素
                     )
                   ),
                  otherAccountsPictures: <Widget>[//右侧可以放其他用户图片。。用处暂时不明
                    Image.network("//images.com/images/flutter4.png"),
                    Image.network("//images.com/images/flutter5.png"),
                  ],
                 )
               )
             ],
           ),
           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(),
         ],
       ),
     ),

需求：如果在抽屉中定义路由跳转,跳转到其他页面时返回关闭侧边栏怎么操作呢?

> 可以通过清除路由隐藏侧边栏,路由栈清除后需要跳转回来的时候就不会打开抽屉组件

......
       Divider(),
            ListTile(
             leading: CircleAvatar(
               child: Icon(Icons.people)
             ),
             title: Text("用户中心"),
             onTap: (){ 
               Navigator.of(context).pop();  //隐藏侧边栏
               Navigator.pushNamed(context, '/user');//跳转到用户中心页面
             },
           ),
           Divider(),
    ......