码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter -------- Drawer侧滑

时间:2019-05-09 23:46:30      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:效果   caff   mat   ret   官方   构建   图片   横线   ict   

侧滑菜单在安卓App里面非常常见

 

抽屉通常与Scaffold.drawer属性一起使用。抽屉的子项通常是ListView,其第一个子项是DrawerHeader ,它显示有关当前用户的状态信息。其余的抽屉儿童往往与构建ListTile S,经常有结束AboutListTile。

 

可以通过调用Navigator.pop关闭打开的抽屉

 

效果图:

    技术图片

 

代码:

 

/***
 * Drwaer 侧滑
 */

class DrawerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new DrawerMain();
  }
}

class DrawerMain extends State<DrawerDemo> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Drawer"),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget>[
            new UserAccountsDrawerHeader(
              accountName: Text("切切歆语"),
              accountEmail: Text("zhangqie@foxmail.com"),
              currentAccountPicture: new GestureDetector(
                child: new CircleAvatar(
                  backgroundImage: new ExactAssetImage("images/pic2.png"),
                ),
              ),
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  fit: BoxFit.fill,
                  image: new ExactAssetImage("images/lake.jpg"),
                ),
              ),
            ),
            new ListTile(
              title: new Text("小花"),
              trailing: new Icon(Icons.local_florist),
            ),
            new ListTile(
              title: new Text("搜索"),
              trailing: new Icon(Icons.search),
              onTap: () {},
            ),
            new Divider(),//横线
            new ListTile(
              title: new Text("设置"),
              trailing: new Icon(Icons.settings),
              onTap: () {
                Navigator.of(context).pop();//点击关闭侧滑
                _neverSatisfied();
              },
            ),
          ],
        ),
      ),
      body: new Center(
        child: new Text(" Hello "),
      ),
    );
  }
}

 

 

官方文档
https://docs.flutter.io/flutter/material/Drawer-class.html

 

Flutter -------- Drawer侧滑

标签:效果   caff   mat   ret   官方   构建   图片   横线   ict   

原文地址:https://www.cnblogs.com/zhangqie/p/10826754.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!