Flutter 底部向上动画弹出菜单
xiangzhihong 2021/1/13 14:07:45 次
在移动应用开发中，我们经常会遇到弹出菜单的开发需求，对于下拉菜单可以参考Flutter 自定义下拉菜单，而如果是向上的弹出菜单或者更加负责的扇形菜单，则需要开发者进行自定义开发。
上面是自定义向上弹出菜单的示例，如果要实现上面的效果，需要开发者对动画（AnimationController、Animation）和Flow组件能够很熟练的进行使用。，为了方便大家快速的进行开发，现在我们将它封装城一个组件，使用前需要添加如下插件依赖代码。
shake_animation_widget: ^2.1.2
然后，再添加如下测试代码。
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: [
Positioned(
right: 33,
bottom: 33,
//悬浮按钮
child: RoteFloatingButton(
//菜单图标组
iconList: [
Icon(Icons.add),
Icon(Icons.message),
Icon(Icons.aspect_ratio),
],
//点击事件回调
clickCallback: (int index){
},
),
),
],
),
),
);
}除了上面这种线性的菜单外，扇形菜单或者圆形菜单也是比较常用的，例如下面是扇形菜单的示例代码。
void main() {
runApp(RootPage());
}
class RootPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
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(),
],
),
),
);
}
Container buildContainer() {
return Container(
child: BottomRoundFlowMenu(
iconList: [
Icon(
Icons.add_circle_outline,
color: Colors.white,
),
Icon(Icons.directions_car, color: Colors.white),
Icon(Icons.camera, color: Colors.white),
Icon(Icons.local_shipping, color: Colors.white),
],
iconBackgroundColorList: [
Colors.deepOrangeAccent,
Colors.deepPurple,
Colors.blueGrey,
Colors.blueAccent,
],
//点击事件回调
clickCallBack: (int index) {},
),
);
}
}可以发现，配合动画组件和Flow组件，我们可以开发出很多复杂的效果。
参考：Flow弹出菜单
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[Flutter 底部向上动画弹出菜单]http://www.zyiz.net/tech/detail-150894.html
您可能感兴趣的文章:
- 2019-07-07Java编写中容易搞错的一些东西
- 2021-01-23MyBatis初级实战之六：一对多关联查询
- 2021-01-22这次,十分钟把宏任务和微任务讲清楚
- 2021-01-22开发中的你的Git提交规范吗？
- 2021-01-22Spring Initializr中生成的mvnw是干吗的？
- 2021-01-22开发中的你的Git提交规范吗？
- 2021-01-22在抽象类中使用@Autowired
- 2021-01-22SpringBoot 整合 Log4j2 日志框架
- 2021-01-21JVM 判断对象已死，实践验证GC回收
- 2021-01-212020年，得与失，汗水和泪水
扫描二维码或查找【程序员编程王】
可以随时随地学编程啦！
共有 条评论 网友评论