Flutter第十四弹 抽屉菜单效果

目标：

1.怎么构建抽屉菜单效果？

2.抽屉菜单怎么定制？

一、抽屉菜单

侧滑抽屉菜单效果

1.1 抽屉菜单入口

Flutter 的脚手架Scaffold，默认提供了抽屉菜单效果入口。

主页面采用一个简单的页面，侧滑菜单首先使用一个Image，先看看侧滑效果。 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutter/drawer/widget/main_drawer.dart';void main() => runApp(DrawerApp());/*** 构建抽屉菜单APP** @author zhouronghua* @time 2024/6/20 上午9:47*/
class DrawerApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("抽屉菜单"),),drawer: Drawer(/// 自定义抽屉菜单Widgetchild: MainDrawer(),),body: new MainPage(),),);}
}/*** 主页面** @author zhouronghua* @time 2024/6/20 上午10:02*/
class MainPage extends StatelessWidget {@overrideWidget build(BuildContext context) {// 主页面简单一个容器return Container(child: Text("我是主页面"),);}
}

显示效果：

 1.2