题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
本文章最后的效果如下:
如上图的效果,当点击菜单按钮时,子菜单向上动画弹出,然后当点击弹出的子菜单时,所有的子菜单再依次向下回弹回去。
1 第一步构建页面的主体,代码如下:
///向上弹出菜单页主体页面
class FloatingActionButton9Page extends StatefulWidget {
@override
_PageState createState() => _PageState();
}
class _PageState extends State<FloatingActionButton9Page> {
@override
Widget build(BuildContext context) {
///定义菜单按钮选项
List<Icon> iconList = [
Icon(Icons.add),
Icon(Icons.save),
Icon(Icons.share),
];
return Scaffold(
appBar: AppBar(
title: Text("悬浮按钮"),
),
backgroundColor: Colors.white,
///填充屏幕空间
body: ConstrainedBox(constraints: BoxConstraints.expand(), child: Stack(
children: [
///向上弹出的按钮组件
RoteFloatingButton(
///子菜单按钮选项
iconList:iconList,
子菜单按钮的点击事件回调
clickCallback: (int index){
print(<