直播带货系统源码利用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中心Icon
val 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,
//所有展开的菜单Item
items: 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实现 展开/折叠多级悬浮菜单的相关代码， 更多内容欢迎关注之后的文章