flutter左边导航栏
时间: 2023-09-06 08:08:18 浏览: 42
在Flutter中,可以使用Drawer组件实现左边导航栏。以下是一个简单的示例代码:
```
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {
// TODO: Handle item 1 tap
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// TODO: Handle item 2 tap
},
),
],
),
),
body: Center(
child: Text('Hello, world!'),
),
);
}
}
```
在此代码中,我们在Scaffold中添加了一个Drawer组件,其中包含DrawerHeader和ListTile子组件。DrawerHeader用于显示抽屉的标题,而ListTile用于显示抽屉的选项。您可以根据需要添加更多的ListTile子组件。
在ListTile的onTap回调中,您可以添加处理选项点击的代码。例如,您可以打开一个新的页面或显示一个SnackBar。