FAB效果如何实现?

时间:2026-02-15 10:02:54

1、FAB交互效果如下图:点击加号按钮弹出更多当前页可用功能,此效果中包含组件为四个图标组件。主要利用状态的特性制作。

FAB效果如何实现?

2、具体做法:

1、编辑全局状态

制作加号按钮。

FAB效果如何实现?

3、拖入「加号」图标,外边框尺寸设置为圆形45*45,图标大小24,图标背景色#ff5722,前景色白色。

FAB效果如何实现?

4、制作其余三个按钮。

FAB效果如何实现?

5、「收藏」、「编辑」、「返回」按钮的外边框尺寸为圆形40*40,图标大小19,背景色#ff5722,不透明度8,前景色白色。

FAB效果如何实现?

6、在状态1中将制作好的四个按钮按如图位置摆放,将「收藏」、「编辑」、「返回」三个图标旋转一定角度,并设置为隐藏。

FAB效果如何实现?

7、在状态1中将制作好的四个按钮按如图位置摆放,将「收藏」、「编辑」、「返回」三个图标旋转一定角度,并设置为隐藏。

FAB效果如何实现?

© 2026 海能知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com