Flutter -实现侧滑效果

思路：侧滑也属于页面路由的一部分，所以先创建页面路由（Scafflod）,一个页面包括侧滑区域和主内容区域，侧滑区域又包括头部布局和列表菜单布局，如图。类似Android原生的侧滑效果。

Scafflod一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。如果每个路由页面都需要开发者自己手动去实现这些，这会是一件非常麻烦且无聊的事。幸运的是，Flutter Material组件库提供了一些现成的组件来减少我们的开发任务

首先大体的页面结构；

  @override
  Widget build(BuildContext context) {
    var _select_index;
    return Scaffold(
      appBar: AppBar(
      ),
      drawer: HomeDrawer(),// 侧滑对象
      body: contentPager(
      
      ),
      bottomNavigationBar: ...忽略
    );
  }

class HomeDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer( //侧滑对象
      child: Column(// 主轴方向
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          DrawerHeader( // 侧滑头部
            decoration: BoxDecoration(color: Colors.lightBlueAccent),
            child: Center(
              child: ClipOval(
                child: Image.asset("images/Rice.png", width: 100, height: 100),
              ),
            ),
          ),
          Expanded(// 伸展控件
            child: ListView( 
              children: <Widget>[
                ListTile(
                  leading: Image.asset(
                    "images/Beer.png",
                    width: 33,
                    height: 33,
                  ),
                  title: Text(
                    "one",
                    textDirection: TextDirection.ltr,
                  ),
                  subtitle: Text("sub_title"),
                  isThreeLine: true,
                  onTap: () => {print("one")},
                ),
                ListTile(
                  leading:
                  Image.asset("images/apple.png", width: 33, height: 33),
                  title: Text("two"),
                  onTap: () => {print("two")},
                ),
                ListTile(
                  leading:
                  Image.asset("images/Ribs.png", width: 33, height: 33),
                  title: Text("three"),
                ),
                ListTile(
                  leading:
                  Image.asset("images/Rice.png", width: 33, height: 33),
                  title: Text("four"),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}