Jetpack Compose 在图像组件上添加可点击修饰符会更改布局

Question

当您在之前与文本对齐的图像上添加可单击修饰符时，它不再对齐。我猜是由于可点击添加的“触摸区域”？

我怎样才能克服这个问题？

我的代码：

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

Answer 1

只需添加修饰符并使用 Custom 进行渲染Layout，它们将与此完美对齐。如果您仍然遇到错误，请放心，这只是杜维科夫的错觉，它们在数学上将完美对齐。好了，走吧。

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
 }
}

就是这样。试试这个，让我知道它是否有效。