如何实现从左侧滑动的侧边菜单？

Question

我是 Flutter 的新手，刚刚完成入门教程。我想创建一个侧面菜单，它会在您滑动时从左侧出现（就像 Android 上的 Gmail）。

不幸的是，我在文档中找不到这样的布局，而且 flutter gallery 中的示例有点乱。

有人可以解释一下如何实现这样的小部件吗？

Answer 1

Stocks example has a somewhat less complicated use of Drawer.

Answer 2

这里是一个简单的抽屉的例子（我刚刚修改了 flutter create 的默认项目设置）：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('TestProject'),
      ),
      drawer: new Drawer(
        child: new ListView(
          children: <Widget> [
            new DrawerHeader(child: new Text('Header'),),
            new ListTile(
              title: new Text('First Menu Item'),
              onTap: () {},
            ),
            new ListTile(
              title: new Text('Second Menu Item'),
              onTap: () {},
            ),
            new Divider(),
            new ListTile(
              title: new Text('About'),
              onTap: () {},
            ),
          ],
        )
      ),
      body: new Center(
        child: new Text(
          'Center',
        ),
      ),
    );
  }
}

docs 是一个很好的起点 ;)

顺便说一句：在您的脚手架中包含一个抽屉还可以为您处理菜单按钮和向左滑动手势。

Answer 3

在脚手架中只需指定 drawer: Drawer()

示例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(   // this will set the drawer
        child: MyWidget // render your drawer Widget here
      ),
      ... // props hidden
    );
  }
}

如何实现从左侧滑动的侧边菜单？

How to implement a side menu that swipes from the left?

menu

dart

flutter