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


    侧滑菜单在安卓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

  • 相关阅读:
    websocket协议
    vue组件之间的传值
    vue中非父子组件的传值bus的使用
    $.proxy的使用
    弹性盒模型display:flex
    箭头函数与普通函数的区别
    粘贴到Excel的图片总是有些轻微变形
    centos rhel 中文输入法的安装
    vi ,默认为 .asm .inc 采用nasm的语法高亮
    how-to-convert-ppk-key-to-openssh-key-under-linux
  • 原文地址:https://www.cnblogs.com/zhangqie/p/10826754.html
Copyright © 2020-2023  润新知