Jetpack组合查找父项宽度/长度 [英] Jetpack Compose find parents width/length

问题描述

我想显式地检索fulMaxSize()的值。 假设我有：

    Box(Modifier
            .fillMaxSize()
            .background(Color.Yellow)) 
    {
var size = ?
Box(Modifier
            .size(someSize)
            .background(Color.Blue))
    {Text("Test")}

我希望多次更改第二个Box的大小(可能源自某个视图模型)，然后将其重置为MaxSize。

我不知道任何‘getMaxSize()’方法，我怎么做？

推荐答案

如果您确实需要原始大小值，可以使用以下代码：

var size by remember { mutableStateOf(IntSize.Zero) }

Box(Modifier
    .fillMaxSize()
    .background(Color.Yellow)
    .onSizeChanged {
        size = it
    }
) {
    Box(
        Modifier
            .then(
                with(LocalDensity.current) {
                    Modifier.size(
                        width = size.width.toDp(),
                        height = size.height.toDp(),
                    )
                }
            )
            .background(Color.Blue)
    ) { Text("Test") }
}

但请注意，就性能而言，这并不是最优的：该视图呈现了两次。第一次第二个框的大小为零，然后调用onSizeChanged块，然后第二次呈现视图。

在顶级视图中使用remember时要特别小心，因为更改状态将触发完全视图堆栈重新呈现。通常您希望将屏幕拆分为多个带有状态的视图，因此只更改一个视图状态将重新呈现此视图。

您还可以在BoxWithConstraintsScope中使用BoxWithConstraints，其中您可以获得maxWidth/maxHeight：它的代码要少得多，性能也略有提高。

BoxWithConstraints(
    Modifier
        .fillMaxSize()
        .background(Color.Yellow)
) {
    Box(
        Modifier
            .size(
                width = maxWidth,
                height = maxHeight,
            )
            .background(Color.Blue)
    ) { Text("Test") }
}

但通常情况下，如果您想要指示大小依赖关系，在不直接知道大小的情况下使用修饰符就足够了。它提供了更多编写代码的编写方式和更优化的编写方式。

因此，如果您希望第二个框与第一个框的大小相同，只需在其上使用.fillMaxSize()即可。如果你想让它成为父代的一部分，你可以添加分数参数。要使第二个框大小是第一个框大小的一半，可以执行以下操作：

Box(
    Modifier
        .fillMaxSize(fraction = 0.5f)
) { Text("Test") }

如果您想要宽度/高度不同的部件：

Box(
    Modifier
        .fillMaxWidth(fraction = 0.3f)
        .fillMaxHeight(fraction = 0.7f)
) { Text("Test") }

这篇关于Jetpack组合查找父项宽度/长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！