Flutter UI基础 - 侧拉抽屉菜单

在移动开发中，我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣，这样才算得上好的 UI 设计。这件我们在 Scaffold 通常是上下结构，头部是标题栏下面主界面。

@override
Widget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: Text('$title Demo'),),),),
);

Scaffold 除了 appBar 和 body 属性以为还有 drawer 属性方便我们定义侧边抽屉。

@override
Widget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: Text('$title Demo'),),drawer: Drawer()),),
);

这样便可以在 child 为侧拉抽屉添加内容，内容是添加一个列表。DrawerHeader 添加标题栏。然后 decoration 中添加背景颜色。然后通过 ListTile 组件来添加一条一条内容

child: ListView(padding: EdgeInsets.zero,children: <Widget>[DrawerHeader(child: Text('$title Demo'),decoration: BoxDecoration(color: Colors.blue),),ListTile(title: Text("React"),onTap: (){Navigator.pop(context);},),ListTile(title: Text("Vue"),onTap: (){Navigator.pop(context);},)],
),

为 ListTile 添加 onTap 事件来通过 Navigator 返回到主界面。

 ListTile(title: Text("Vue"),onTap: (){Navigator.pop(context);},)

完整代码

import 'package:flutter/material.dart';class DrawerApp extends StatelessWidget{final appTitle = "侧滑抽屉";@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(title: appTitle,home: MyHomePage(title:appTitle),);}}class MyHomePage extends StatelessWidget{final String title;MyHomePage({Key key,this.title}):super(key:key);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: Text('$title Demo'),),drawer: Drawer(child: ListView(padding: EdgeInsets.zero,children: <Widget>[DrawerHeader(child: Text('$title Demo'),decoration: BoxDecoration(color: Colors.blue),),ListTile(title: Text("React"),onTap: (){Navigator.pop(context);},),ListTile(title: Text("Vue"),onTap: (){Navigator.pop(context);},)],),),);}
}