Flutter Drawer

最新推荐文章于 2024-07-03 23:56:41 发布

flm007

最新推荐文章于 2024-07-03 23:56:41 发布

阅读量796

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/flm007/article/details/88183976

版权

Flutter 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Drawer（抽屉菜单）即通过右侧/左侧滑出来的菜单栏。在 Flutter 里使用的是 Drawer 组件。

使用的方式是在 Scaffold 里的 drawer 属性设置。

var imgUrl = 'https://img.zcool.cn/community/0167c05901528c' +
             'a8012145505a6888.jpg@1280w_1l_2o_100sh.jpg';

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: (),
        body: (),
        drawer: Drawer(
            child: Container(
                color: const Color(0xfff1f2f3),

                child: Column(
                    children: <Widget>[
                        Image.network(this.imgUrl),

                        Container(
                            padding: EdgeInsets.all(20.0),
                            child: Row(
                                children: <Widget>[
                                    Icon(Icons.home, color: Colors.black87),
                                    Text('首页'),
                                ],
                            ),
                        )
                    ],
                ),
            ),
        )
    );
}

Drawer 常用属性：

child → Widget - Drawer 内容。
elevation → double - Drawer 阴影效果大小。
semanticLabel → String - Drawer 关闭/打开时的通知信息。

有时候先通过点击 Drawer 里的元素从而关闭 Drawer，那么如何实现？使用 Navigator.pop 可以关闭 Drawer。

MaterialButton(
    color: Colors.blue,
    textColor: Colors.white,
    child: Text('点我'),
    onPressed: () {
        Navigator.pop(context);
        // Or Navigator.of(context).pop();
    },
),

菜单项

菜单项可以自己定义也可以使用 ListTile 和 Divider 来实现。

ListTile(
    title: Text('说话心理学'),
    trailing: Icon(Icons.chevron_right),
),
Divider(),
ListTile(
    title: Text('从众心理学'),
    trailing: Icon(Icons.chevron_right),
),