FlutterUI实现侧拉抽屉菜单
短信预约 -IT技能 免费直播动态提醒
在移动开发中，我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣，这样才算得上好的 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);
},
)
],
),
),
);
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
