Jetpack Compose在Image组件上添加clickable修饰符会改变布局。

Question

当您在先前与文本对齐的图像上添加可点击修饰符时，它将不再对齐。这是由于 clickable 添加的“触摸区域”导致的吗？

我该如何解决这个问题？

我的代码：

Row(
    modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Image(
        modifier = modifier.clickable { onBackClick?.invoke() }
        imageVector = ImageVector.vectorResource(viewModel.backIconId),
        contentDescription = "",
        alignment = Alignment.Center
    )

    Text(
        text = stringResource(viewModel.titleStringId),
        style = typography.subtitle1
    )

    Text(
        text = " ",
        style = typography.subtitle1
    )
}

有和没有clickable的情况下的应用内渲染效果（而不是预览）如何呢？

- Cyril

---

@CyrilNiobé，我们需要更多关于问题的上下文，如果可能的话，整个代码都要提供...从你的代码来看，没有什么问题...也许这只是Duvikov的错觉。请给我们提供一个可重现的代码。 - AgentP

你确定 viewModel.backIconId 是一个常量 ID 吗？也许你有两个图片 ID，我猜不太确定...但如果你认为它们在点击后没有完美对齐，那么就会出现副作用，导致你的视图重新组合，在此期间某些东西变得疯狂... - AgentP

你为什么要添加只包含一个空格的 Text？我相信这与此有关。如果你仔细观察，你会发现移位等于空格字符所占据的宽度。 - Richard Onslow Roper

很可能问题在于您将父级“modifier”同时传递给“Column”和“Image”。请改为将“Modifier”传递给您的图像。 - Phil Dukhov

这不是在 Android Studio 中的预览，而是应用程序上真正的渲染，因此这不是幻觉。 是的，viewModel.backIconId 是一个常量 ID。 - Cyril

Answer 1

只需添加修饰符并使用自定义布局进行渲染，它们将完美地对齐。如果您仍然遇到错误，请放心，那只是杜维科夫幻觉，它们在数学上将完全对齐。好的，让我们开始吧。

Layout( content = {
    Image(
        modifier = modifier.clickable { onBackClick?.invoke() }
        imageVector = ImageVector.vectorResource(viewModel.backIconId),
        contentDescription = "",
        alignment = Alignment.Center
    )

    Text(
        text = stringResource(viewModel.titleStringId),
        style = typography.subtitle1
    )

    Text(
        text = " ",
        style = typography.subtitle1
    )
}){ measurables, constraints ->
 val image = measurables[0].measure(constraints)
 val title = measurables[1].measure(constraints)
 layout(constraints.maxWidth, constraints.maxHeight(){
  image.place(x = image.width, y = image.height / 2) // I added image width and half its height as paddings
  title.place(x = (constraints.maxWidth - title.width) / 2, title.height / 2) // Centering Dimensionally
 //Skipping the Third Text Here since I see no need of that
 }
}

就这样了。试试看，如果可以的话请告诉我。

- Richard Onslow Roper