Flutter 制作一个抽屉菜单
在Flutter中,你可以使用Drawer
组件来创建一个抽屉菜单。以下是一个简单的例子:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('抽屉菜单示例'),
),
drawer: Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('张三'),
accountEmail: Text('zhangsan@example.com'),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage('https://example.com/profile.jpg'),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('主页'),
onTap: () {
// 处理点击事件
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('设置'),
onTap: () {
// 处理点击事件
},
),
ListTile(
leading: Icon(Icons.help),
title: Text('帮助'),
onTap: () {
// 处理点击事件
},
),
// 添加更多的ListTile来增加菜单项
],
),
),
body: Center(
child: Text('主内容区'),
),
),
);
}
}
在这个例子中,Drawer
组件被放置在Scaffold
的drawer
属性中。ListView
包含了一个UserAccountsDrawerHeader
作为头部,后面跟着几个ListTile
作为菜单项。每个ListTile
都有一个图标和标题,并且可以设置点击事件处理函数。这样就创建了一个简单的抽屉菜单。
评论已关闭