flutter写一个左侧滑菜单
Flutter的左侧滑菜单可以通过Scaffold的drawer属性来实现。下面是一个简单的左侧滑菜单示例代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('左侧滑菜单示例'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(
'左侧滑菜单',
style: TextStyle(
color: Colors.white,
fontSize: 24,
),
),
),
ListTile(
title: Text('菜单项 1'),
onTap: () {
// 点击菜单项时的处理
},
),
ListTile(
title: Text('菜单项 2'),
onTap: () {
// 点击菜单项时的处理
},
),
],
),
),
body: Center(
child: Text('主要内容区域'),
),
);
}
}
在上面的示例中,我们定义了一个Scaffold,并将drawer属性设置为一个Drawer组件。Drawer组件包含了一个ListView,其中包含了若干个菜单项。DrawerHeader组件用于显示菜单的标题。当用户点击菜单项时,可以在对应的onTap回调函数中进行处理。主要内容区域可以通过body属性来设置。
原文地址: https://www.cveoy.top/t/topic/btHd 著作权归作者所有。请勿转载和采集!