如何实现从左侧滑动的侧边菜单? [英] How to implement a side menu that swipes from the left?

问题描述

我是Flutter的新手，刚刚完成了入门教程.我想创建一个侧边菜单，当您滑动时该菜单会从左侧显示(例如Android上的Gmail).

不幸的是，我在文档中找不到这样的布局，而flutter画廊中的示例有点混乱.

有人可以解释一下如何实现这种Widget吗?

解决方案

以下是一个简单抽屉的示例(我刚刚修改了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',
        ),
      ),
    );
  }
}

文档是一个很好的起点；)

顺便说一句:在脚手架中包括一个抽屉，还可以照顾菜单按钮和向左滑动的手势.

I am new to Flutter and just finished the get started tutorial. I would like to create a side menu, which will appear from the left side when you swipe (like Gmail on Android).

Unfortunately, I can't find such a layout on the documentation and the example from the flutter gallery is a bit messy.

Could someone please explain me how to implement such a Widget?

解决方案

Here is an example for a simple Drawer (I just adapted the default project setup from 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',
        ),
      ),
    );
  }
}

The docs are a good place to start ;)

Btw: including a drawer in your scaffold also takes care of the menu button and the left swipe gesture for you.

这篇关于如何实现从左侧滑动的侧边菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！