如何在jetpack compose中保存可扩展卡组合状态和滚动位置

时间:2021-06-01 14:47:20

标签: android android-jetpack-compose android-jetpack-compose-list android-jetpack-compose-scaffold android-jetpack-compose-surface

我正在使用自定义可扩展卡,

@Composable
fun ExpandableCardComposable(
    isExpandable: Boolean = false,
    topContent: @Composable () -> Unit,
    buttomContent: @Composable () -> Unit
) {
    val transactionState = remember {
        MutableTransitionState(isExpandable)
            .apply {
                targetState = isExpandable
            }
    }
    val transaction = updateTransition( transactionState, label = "")
    Card(
        modifier = Modifier.padding(horizontal = Size.DOUBLE_SPACING),
        elevation = Size.Card.ELEVATION,
        shape = RoundedCornerShape(Size.Card.CORNER_RADIUS),
    ) {
        Column(modifier = Modifier.animateContentSize()) {
            Surface(elevation = Size.Card.ELEVATION) {
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable(onClick = { transactionState.targetState = !transaction.currentState })
                        .padding(horizontal = Size.DOUBLE_SPACING),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Box(modifier = Modifier.weight(1f)) {
                        topContent()
                    }
                    val iconId = if (transaction.currentState) R.drawable.close else R.drawable.expand
                    Image(
                        imageVector = ImageVector.vectorResource(id = iconId),
                        contentDescription = null
                    )
                }
            }

            if (transactionState.currentState) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(),
                ) {
                    buttomContent()
                }
            }
        }
    }
}

我将这个可组合用于包含数据列表及其工作的屏幕之一。但是,当我切换到其他屏幕并返回到可扩展卡片屏幕时,卡片状态和滚动位置会发生变化。如何保存可扩展卡片屏幕状态和滚动位置,使其不会改变。

2 个答案:

答案 0 :(得分:0)

您应该将所有状态保存在视图模型中。

事件滚动位置可以保存。

添加这个

rememberScrollableState{delta->
mViewModel.scrollState += delta
delta
}
)

如果您还没有,请创建一个名为 mViewModel.kt 的新文件,扩展视图模型类。向其中添加一个名为 scrollState 的变量以存储如上的状态 另外,添加一个布尔值来存储消耗的状态,如

var expanded by mutableStateOf (false)

试试

答案 1 :(得分:0)

https://developer.android.com/jetpack/compose/navigation

保存和恢复状态在导航期间完成。如果您使用导航组件,请参阅 saveStaterestoreState