Fluter：抽屉效果

效果图

QQ20210928-163812.gif

flutter的抽屉效果是使用Drawer组件实现的

drawer：左边
endDrawer：右边

Drawer可以添加头部属性：

DrawerHeader：展示头部基本信息
UserAccountsDrawerHeader：展示用户头像、姓名、邮件等信息

child: DrawerHeader(
    child: Center(
      child: Text('header'),
    ),
 ),

child: UserAccountsDrawerHeader(
  accountEmail: new Text('https://www.baidu.com'),
  accountName: new Text('我是一个好人'),
  currentAccountPicture: new CircleAvatar(
      backgroundImage: new AssetImage('images/header.png'),
   ),
)

tabbar底部导航栏：

class TabbarPageState extends State<TabbarPage> {
  @override
  final List<Widget> page_children = [
    HomePage(),
    MePage(),
  ];
  ///页面
  final List<String> page_title = ['首页', '我的'];
  ///标题
  int _currentIndex = 0;
  ///当前选中的页面
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(page_title[_currentIndex]),
        ///导航栏标题
        centerTitle: true, ///导航栏标题居中显示（IOS默认居中，Android默认靠左）
        leading: _currentIndex == 0 ? Builder( ///自定义抽屉效果按钮
          builder: (BuildContext context) {
            return IconButton(
                icon: Icon(Icons.menu),
                onPressed: (){
                    Scaffold.of(context).openDrawer();
                }
            );
          },
        ):null,
        actions: _currentIndex == 0 ?  [
          Builder(builder: (context) {
            return IconButton(
                icon: Icon(Icons.settings),
                onPressed: (){
                  Scaffold.of(context).openEndDrawer();
                }
            );
          }),
        ] : null,
      ),
      body: page_children[_currentIndex],
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: onChangePage,
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: page_title[_currentIndex],
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: page_title[_currentIndex],
          ),
        ],
      ),
      drawer: _currentIndex == 0 ? LeftDrawerPage() : null,
      endDrawer: _currentIndex == 0 ? RightDrawerPage() : null,
    );
  }

  void onChangePage(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

抽屉效果左边

class LeftDrawerPageState extends State<LeftDrawerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: Text('设置'),
        centerTitle: true,///居中
      ),
      body: ListTile(
        leading: Icon(Icons.person),
        title: new Text('个人'),
        subtitle: new Text('个人详情'),
      ),
    );
  }
}

抽屉效果右边

class RightDrawerPageState extends State<RightDrawerPage> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          Container(
            height: 200,
            // child: DrawerHeader(
            //     child: Center(
            //       child: Text('header'),
            //     ),
            // ),
            child: UserAccountsDrawerHeader(
              accountEmail: new Text('https://www.baidu.com'),
              accountName: new Text('我是一个好人'),
              currentAccountPicture: new CircleAvatar(
                backgroundImage: new AssetImage('images/header.png'),
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: new Text('个人'),
            subtitle: new Text('个人详情'),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: new Text('个人'),
            subtitle: new Text('个人详情'),
          )
        ],
      ),
    );
  }
}

new AssetImage('images/header.png') 添加本地图片
Icon(Icons.person) 添加系统中图标
_currentIndex == 0 ? LeftDrawerPage() : null  此方法是在哪一个页面添加抽屉效果，否则tabbar所有页面都将添加。demo中所有的_currentIndex == 0 ? ：判断都是为了只在一个页面添加

demo链接 代码分支在master下，默认是main需选择分支