直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单

直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单的相关代码
1.大家看一下，我们最终提供出来的调用的示例：

//初始化2个Item弹出菜单
val expandFbItemList: MutableList<MultiFabItem> = mutableListOf(MultiFabItem(...),MultiFabItem(...))val context = LocalContext.current//创建一个MultiFloatingActionButton组件MultiFloatingActionButton(srcIcon = Icons.Filled.Add,showLabels = true,items = expandFbItemList) {//item被点击了Toast.makeText(context.applicationContext,"点击了:${it.label}",Toast.LENGTH_SHORT).show()}

2.我们需要实现展开和折叠功能，首先需要定义一个状态类

enum class MultiFabState {Collapsed,Expanded
}

3.我们需要外部能修改菜单内的数据，定义一个Item实体bean

class MultiFabItem(//Fab中心Iconval icon: ImageVector,//提示文本内容val label: String,//Fab中心Icon颜色val srcIconColor: Color = Color.White,//提示文本内容颜色val labelTextColor: Color = Color.White,//提示文本内容区域背景色val labelBackgroundColor: Color = Color.Black.copy(alpha = 0.6F),//Fab按钮背景色val fabBackgroundColor: Color = Color.Unspecified,
)

4.定义一个MultiFloatingActionButton的Compose方法

@Composable
fun MultiFloatingActionButton(modifier: Modifier = Modifier,//“+”号按钮的图片srcIcon: ImageVector,//“+”号按钮的颜色srcIconColor: Color = Color.White,//“+”号按钮区域背景色fabBackgroundColor: Color = Color.Unspecified,//是否显示item的label内容showLabels: Boolean = true,//所有展开的菜单Itemitems: List<MultiFabItem>,//菜单Item的点击回调onFabItemClicked: (item: MultiFabItem) -> Unit
)

5.定义动画，用于折叠和展开菜单显示的动画

//下面【省略号】的部分代码，文章【末尾会有全量的代码】【贴图】，有需要的可以去看一下。
//当前菜单默认状态处于：Collapsed
val currentState = remember { mutableStateOf(MultiFabState.Collapsed) }
//创建过渡对象，用于管理多个动画值，并且根据状态变化运行这些值
val transition = updateTransition(targetState = currentState, label = "")
//用于+号按钮的旋转动画
val rotateAnim: Float by transition.animateFloat(.....) { state ->//根据state来设置最终的角度if (state.value == MultiFabState.Collapsed) 0F else -45F
}
//透明度动画
val alphaAnim: Float by transition.animateFloat(....) { state ->if (state.value == MultiFabState.Expanded) 1F else 0F
}
//记录每个Item的收缩动画的Transition
val shrinkListAnim:MutableList<Float> = mutableListOf()
items.forEachIndexed { index, _ ->val shrinkAnim by transition.animateFloat(.....)//添加到收缩列表中shrinkListAnim.add(index,shrinkAnim)
}

6.使用Box包裹我们的所有FloatingActionButton

Box(modifier = modifier, contentAlignment = Alignment.BottomEnd) {items.forEachIndexed{index, item ->Row(....){if(showLabels){Text(....)}FloatingActionButton(....)}}FloatingActionButton(....)
}

以上就是直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单的相关代码，更多内容欢迎关注之后的文章

直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单相关推荐

海外直播带货系统源码，海外的直播带货究竟是什么样？
直播带货系统我们第一时间就会想到DOU音.TAO宝.某东.拼夕夕等,彷佛只要是商城系统,都会有直播带货功能,那在国内直播带货蓬勃发展,屡创新记录时,海外的直播带货系统又是什么样子的呢?是不是和国内我们 ...
直播带货系统源码，居家“神器”不出门就能购物
如今,直播带货的火爆程度已经超出了人们的想象.线下销售行业的卖家也开启了直播带货模式,直播带货的的火爆归根到底还是消费者的购物方式发生的变化.从传统的线下购物到电商购物,再到今天的直接直播带货.从各大 ...
直播带货app源码，实现直播连麦和PK
一.概述连麦:是指直播带货app源码中,由观众向主播发起连线请求,在主播和该观众之间建立低延迟的通讯链路,而其他观众可以看到"主播+连麦观众"的合成音视频内容. PK:是指直播过 ...
运营级手机直播平台源码短视频直播带货APP源码
短视频直播带货APP源码全开源原生直播APP源码前端:原生APP 安卓端:Java 苹果端:OC 后台:PHP 数据库:Mysql 技术框架:Thinkphp5.1 系统特色功能包括:礼物系统:提 ...
自己搭建网红直播带货平台源码该怎么做
直播带货作为"直播+"形态的一种,在近两年收到了广泛的关注,本文主要讲述:自己搭建网红直播带货平台源码,需要注意些什么,有哪些常见问题? 搭建网红直播平台源码需要多少人手: 产品组 ...
小程序直播带货app源码直播组件接入指引
小程序直播带货app源码直播组件接入指引一.简介小程序直播带货系统,是微信提供给小程序开发者的直播组件.通过调用该组件,商家可以在直播带货app源码中实现直播功能. 按下面的使用说明接入,在你的直 ...
直播带货app源码，进行直播平台的环境部署
直播项目环境部署最近总是接到直播带货app源码的开发,在环境部署的过程中踩了不少坑.现在我将环境部署的完整教程分享给大家. 一 .搭建前期准备注:操作系统centos7.0以上 64位,直播带货a ...
直播带货app源码搭建，从直播CDN原理说起
到处都在谈直播,直播带货app源码技术目前越来越大众化,但也面临着更多的挑战.本次分享主要介绍直播的一般流程,CDN的技术原理及架构,CDN直播技术的难点和对应的解决方案.希望能够给大家带来帮助,更希 ...
直播带货app源码，实现直播的秒开和优化
一.概述目前,移动视频直播正处于一个高速膨胀的时期.游戏直播,秀场直播.直播带货app源码等APP铺天盖地.如何在千军万马中脱颖而出,直播的实时性和流畅性是重中之重. 直播带货app源码的实时性对于 ...

直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单

直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单相关推荐

最新文章

热门文章

直播带货系统源码利用FloatingActionButton实现 展开/折叠多级悬浮菜单

直播带货系统源码利用FloatingActionButton实现 展开/折叠多级悬浮菜单相关推荐

最新文章

热门文章

直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单

直播带货系统源码利用FloatingActionButton实现展开/折叠多级悬浮菜单相关推荐