Flutter UI侧拉抽屉菜单
当走的路甚远 人气:0在移动开发中,我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣,这样才算得上好的 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); }, ) ], ), ), ); } }
加载全部内容