首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >请问如何让 LazyColumn里的组件不会同时展开2+个侧滑菜单,当点击外部空白处时,关闭正在展开的侧滑菜单?

请问如何让 LazyColumn里的组件不会同时展开2+个侧滑菜单,当点击外部空白处时,关闭正在展开的侧滑菜单?

提问于 2023-08-21 17:56:23
回答 0关注 0查看 71

我已经找到了一个可滑动的方法,但我不会如何编写不可以同时展开2+个侧滑菜单,当点击外部空白处时,关闭正在展开的侧滑菜单,请问应该如何解决 以下是我的代码 @Composable fun AnniversaryList( dayList: List<Day>, onclikc: (Day) -> Unit, viewModel: anniversaryViewModel= androidx.lifecycle.viewmodel.compose.viewModel(factory = AppViewModelProvider.Factory) ){ var currentSlidingIndex = remember { mutableStateOf(-1) } val sortedList = dayList.sortedBy { it.id } // 根据id字段升序排序 val coroutineScope = rememberCoroutineScope() LazyColumn( modifier = Modifier .fillMaxWidth() .padding(start = 20.dp, end = 20.dp, top = 24.dp), verticalArrangement = Arrangement.spacedBy(15.dp) ) { itemsIndexed(items = sortedList) { index, Day -> key(Day.id) { Row( modifier = Modifier .background( color = colorResource(R.color.anni_background), shape = RoundedCornerShape(16.dp) ) .fillMaxWidth() .height(88.dp) .clip(shape = RoundedCornerShape(16.dp)) ) { SideslipComposeView( itemContent = { daylist(day = Day, onclikc = { onclikc(Day) }) }, blockContent = { SidePull( deleday = { coroutineScope.launch { viewModel.deleteDay(day = Day) } }, Topping = { viewModel.updateIdAndSort(day = Day) } ) }, ) } } } } } package com.example.lovediary.ui.Home.anniversary import androidx.compose.foundation.gestures.Orientation import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.IntOffset import androidx.compose.ui.unit.dp import kotlinx.coroutines.Dispatchers import kotlinx.coroutines.withContext /** * 给控件添加侧滑功能 * @param blockWidth 宽 * @param blockHeight 高 * @param leftSpace 侧滑按钮与原控件中间的间隔 * @param blockContent 侧滑按钮, 宽高要和blockWidth和blockHeight一致 * @param itemContent 原控件 * @param restTrigger 重置状态控制器 restTrigger.value = true 恢复状态 */ @OptIn(ExperimentalMaterialApi::class) @Composable fun SideslipComposeView( itemPadding: PaddingValues = PaddingValues(0.dp), blockWidth: Dp = 130.dp, blockHeight: Dp = 88.dp, leftSpace: Dp = 30.dp, itemContent: @Composable () -> Unit, blockContent: @Composable () -> Unit, restTrigger: MutableState<Boolean> = mutableStateOf(false) ) { val blockSizePx = with(LocalDensity.current) { (leftSpace + blockWidth).toPx() } val sideslipState = rememberSwipeableState(initialValue = State.ClOSS) val anchors = mapOf( 0f to State.ClOSS, -blockSizePx to State.OPEN ) val thresholds: (State, State) -> ThresholdConfig = { from, _ -> if (from == State.ClOSS) { FractionalThreshold(0.3f) } else { FractionalThreshold(0.5f) } } LaunchedEffect(restTrigger.value) { if (restTrigger.value) { withContext(Dispatchers.Main) { sideslipState.animateTo(targetValue = State.ClOSS) } restTrigger.value = false } } Box( modifier = Modifier .padding(paddingValues = itemPadding) .height(blockHeight) .fillMaxWidth() ) { Box(modifier = Modifier .offset { IntOffset(sideslipState.offset.value.toInt(), 0) } .swipeable( state = sideslipState, anchors = anchors, thresholds = thresholds, orientation = Orientation.Horizontal, ) .fillMaxWidth() .height(blockHeight) .clip(RoundedCornerShape(12.dp)) ) { itemContent() } Row( modifier = Modifier .offset { IntOffset( (leftSpace + blockWidth) .toPx() .toInt() + sideslipState.offset.value.toInt(), 0 ) } .size(leftSpace + blockWidth, blockHeight) .align(Alignment.CenterEnd) ) { Spacer( modifier = Modifier .width(leftSpace) ) blockContent() } } } private enum class State { ClOSS, OPEN }

回答

和开发者交流更多问题细节吧,去 写回答
相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档