FlutterUI实现侧拉抽屉菜单

FlutterUI实现侧拉抽屉菜单

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

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

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

@override Widget build(BuildContext context) {   // TODO: implement build   return 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 = "侧滑抽屉";   @override   Widget build(BuildContext context) {     // TODO: implement build     return MaterialApp(       title: appTitle,       home: MyHomePage(title:appTitle),     );   } } class MyHomePage extends StatelessWidget{   final String title;   MyHomePage({Key key,this.title}):super(key:key);   @override   Widget build(BuildContext context) {     // TODO: implement build     return 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);               },             )           ],         ),       ),     );   } }

推荐阅读