主页 / coding / 问题 / 77736830
Accepted
Joris Wit
Asked: 2023-12-31 01:34:20 +0800 CST

为什么 Jetpack Compose 在 onTap 事件中使用旧状态

  • 772

我是 Kotlin 和 Jetpack Compose 的新手，我的 Android 应用程序遇到了问题。当我运行下面的代码时，我可以按“增加”按钮，画布上会显示增加的数字。但是，在这种pointerInput onTap情况下，该数字始终为 1。只有当我通过旋转设备强制重新组合时，才会使用新数字。

看起来好像是使用第一次合成时的状态而不是当前状态。如何使用onTap事件中的最新状态？

一些背景：我使用画布绘制具有动态数量的列和行的网格。我的示例中的数字决定了列数或行数。如果onTap我想计算单击了哪个单元格，以引发我自己的onCellTap事件。我通过使用公式来计算 中使用的单元格的位置来做到这一点onDraw，但相反。这一切都工作正常，直到动态添加列或行，因为我无法使用“旧”列计数进行计算。

mutableIntStateOf我在我的应用程序中使用了 a，而不是本示例中的 a ViewModel。为了简单起见，我从示例中删除了它，我希望这并不重要。

@Composable
fun TopLevelComposable(modifier: Modifier = Modifier) {

    var number by rememberSaveable { mutableIntStateOf(0) }

    Column {
        TestCanvasComposable(number)
        Button(onClick = {

            number += 1

        }) {
            Text(
                text = "Increase",
                modifier = modifier
            )
        }
    }
}

@Composable
fun TestCanvasComposable(
    number: Int,
    modifier: Modifier = Modifier
) {
    val textMeasurer = rememberTextMeasurer()
    Canvas(modifier = modifier
        .fillMaxWidth()
        .height(30.dp)
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = {
                    // This does not show the correct number:
                    Log.i("Test", "The number is $number")
                }
            )
        }, onDraw = {
        drawRect(Color.Yellow, Offset.Zero, this.size)

        drawText(
            textMeasurer = textMeasurer,
            text = buildAnnotatedString {
                withStyle(ParagraphStyle(textAlign = TextAlign.Start)) {
                    // This works perfectly:
                    append("The number is: $number")
                }
            }
        )
    }
    )
}

我尝试删除TestCanvasComposable可组合项，然后将 Canvas 代码放入TopLevelComposable. 经过此更改后，它工作正常。但我想将它们分开以备重复使用。

android-jetpack-compose

1 个回答

  1. Best Answer

    您正在丢失状态，因为在@Composable重组时它会重置数字的值。

    您可以用来rememberUpdatedState跟踪号码的变化number和remember最后更新的号码。

    @Preview
@Composable
fun TopLevelComposable(modifier: Modifier = Modifier) {

    var number by rememberSaveable { mutableIntStateOf(0) }

    Column (modifier = Modifier.fillMaxSize()){
        TestCanvasComposable(number)
        Button(onClick = {

            number += 1

        }) {
            Text(
                text = "Increase",
                modifier = modifier
            )
        }
    }
}

@Composable
fun TestCanvasComposable(
    number: Int,
    modifier: Modifier = Modifier
) {
    val num by rememberUpdatedState(newValue = number)
    val textMeasurer = rememberTextMeasurer()
    Canvas(modifier = modifier
        .fillMaxWidth()
        .height(30.dp)
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = {
                    // This does not show the correct number:
                    Log.i("Test", "The number is $num")
                }
            )
        }, onDraw = {
        drawRect(Color.Yellow, Offset.Zero, this.size)

        drawText(
            textMeasurer = textMeasurer,
            text = buildAnnotatedString {
                withStyle(ParagraphStyle(textAlign = TextAlign.Start)) {
                    // This works perfectly:
                    append("The number is: $num")
                }
            }
        )
    }
    )
}

    它正在工作检查此代码

    • 1

相关问题