题记
—— 优美的应用体验 来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维。
Flutter是谷歌推出的最新的移动开发框架。
本文章实现Demo运行效果 如下:
小编以将这个效果写成了一个依赖库,大家可以直接调用使用
dependencies:
shake_animation_widget: ^2.1.2
然后如上图的Demo实现,首先是构建一个页面,代码如下:
class HomePage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试"),
),
body: Container(
//填充
constraints: BoxConstraints.expand(),
//层叠布局
child: Stack(
children: [
//页面中的其他布局
//右侧向上弹出的动画菜单
buildContainer(),
],
),
),
);
}
}
然后就是通过 RoteFlowButtonMenu 来构建实现,代码如下:
Container buildContainer() {
return Container(
child: RoteFlowButtonMenu(
//菜单图标组
iconList: [
Icon(
Icons.backup_table_sharp,
color: Colors.white,
),
Icon(Icons.aspect_ratio, color: Colors.white),
Icon(Icons.medical_services, color: Colors.white),
Icon(Icons.add, color: Colors.white),
],
//菜单项所使用的背景颜色
iconBackgroundColorList: [
Colors.deepOrangeAccent,
Colors.deepPurple,
Colors.blueGrey,
Colors.blueAccent,
],
//点击事件回调
clickCallBack: (int index) {},
),
);
}
本文章提供的效果如果能满足你的开发需求,直接使用就可以,如果还需要其他效果也以联系小编进行扩展,当然你也可以下载下来依赖库源码参考小编的实现,举一反三实现你想要的效果。
不局限于思维,不局限语言限制,才是编程的最高境界。
点击查看原文可获取源码。
联系客服