在 Jetpack Compose 中以编程方式获取和设置元素的位置

Question

是否可以通过编程方式获取和设置 window 上元素的 position/bounds？比方说，我们有一个简单的 Text 并想在 y 轴上移动它 50dp。

Text(text = "Hello", modifier = Modifier.padding(8.dp).fillMaxWidth())

Answer 1

https://developer.android.com/reference/kotlin/androidx/ui/layout/package-summary#offset

Text(text = "Hello", modifier = Modifier.padding(8.dp).offset(y = 50.dp))

Answer 2

如果我对你的问题的解释正确，那么你想将 Text 移动 50dp y-axis 和文本以及文本上方的 50dp space 应该是可点击的。

这是创建小型自定义可组合项的一种解决方案：

@Composable
fun TextWithPos(content: String, modifier: Modifier, x: Int, y: Int, clickFun: () -> Unit = {}) {

    Text(text = content, modifier = modifier
            .defaultMinSizeConstraints(minHeight = y.dp)
            .clickable(onClick = clickFun)
            .padding(top = y.dp))

}

这个 Composable 设置了一些 dp 为 minHeigth 的文本（minWidth 未使用此处），然后设置 clickable，然后是带有一些 dp 的 padding。其实编不再区分边距和填充，它只是一些 space.

Compose 按顺序处理修饰符，因此 clickable 覆盖了 space（填充）以及 Text 中的文本。如果将 clickable 移动到 padding 下方，则可点击区域仅覆盖 Text.

内的文字

这里是一个带有可点击操作的预览，用于显示可点击区域。因为函数设置一个修饰符并将其移交给自定义可组合项修饰符优先于自定义可组合项中的修饰符集。

@Preview(showBackground = true)
@Composable
fun TextPosPreview() {
    PlaygroundTheme {
        Column() {
            TextWithPos(content = "Hello", modifier = Modifier
                    .padding(start = 16.dp, end=16.dp), x = 0, y = 50) {
                counter++
            }

            var counter by remember { mutableStateOf(1) }
            Text(text = counter.toString(), modifier = Modifier
                    .padding(16.dp))

        }
    }
}

在 Jetpack Compose 中以编程方式获取和设置元素的位置

Get and set position of element programmatically in Jetpack Compose

android

android-jetpack-compose