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

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

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


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

enum class MultiFabState {Collapsed,Expanded
}


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

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


4.定义一个MultiFloatingActionButton的Compose方法

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


5.定义动画&＃xff0c;用于折叠和展开菜单显示的动画

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


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

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


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