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

Question

是否可以以编程方式获取和设置窗口上元素的位置/边界？比方说，我们有一个简单的东西Text，想要50dp在y轴上移动它。

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

如果我正确解释你的问题，那么你想在 y 轴上移动文本 50dp，并且文本和文本上方的 50dp 空间应该是可点击的。

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

@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))

}

此可组合项设置一个带有minHeigth某个 dp 的 Text（minWidth此处未使用），然后设置clickable，然后设置padding带有某个 dp 的 a。实际上，compose 不再区分 margin 和 padding ，它只是一些空格。

Compose 按顺序处理修饰符，从而clickable覆盖空格（填充）和里面的文本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))

        }
    }
}