Flutter-抽屉菜单的实现

配图来自网络，如侵必删

在Flutter开发当中，我们可能会遇到以下的需求：

实现常见的抽屉菜单功能

这个功能，我们可以使用Scaffold组件的drawer和endDrawer属性来实现。这篇博客抽屉菜单的详细过程，希望对看文章的小伙伴有所帮助。

完整的示例代码

这里直接上完整的示例代码，感兴趣的小伙伴可以复制到自己的编译器当中修改。

自定义抽屉组件

import 'package:flutter/material.dart';

/// 抽屉View
class DrawerView extends StatelessWidget {
  const DrawerView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: const <Widget>[
          DrawerHeader(
              decoration: BoxDecoration(color: Colors.yellow),
              child: Text(
                '抽屉菜单的头部',
                style: TextStyle(color: Colors.white, fontSize: 24),
              )),
          ListTile(
            leading: Icon(Icons.message),
            title: Text('消息'),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('设置'),
          ),
        ],
      ),
    );
  }
}

调用代码

import 'package:flutter/material.dart';
import 'package:flutter_one/widget_drawer.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '抽屉菜单Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: DrawerView(),
    );
  }
}

效果如下所示：

image.png

抽屉菜单在很多App都有在使用。看上了上面的代码，Flutter的实现步骤是不是很简单，自己定义抽屉菜单的界面，然后在主页面当中调用就可以了。

属性说明

这里针对相关的属性做出相应的属性说明，熟悉控件的属性方便大家的使用。

属性名称	属性说明
drawer	左边打开的抽屉菜单
endDrawer	右边打开的抽屉菜单