目标:
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