如果我不将其包装在可组合的列或行中，为什么框可兼容填充最大尺寸？ [英] Why Box compasable fill max size if i don't wrap it in a Column or Row composable?

问题描述

如果我将大小指定为100.dp，此代码将填满整个屏幕。

ComposeTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colors.background
    ) {
        Box(
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .clip(RoundedCornerShape(12.dp))
                .background(color = Color.Red)
        ) {

        }
    }
}

此代码通过填充所需大小正确运行。

ComposeTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colors.background
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            Box(
                modifier = Modifier
                    .width(100.dp)
                    .height(100.dp)
                    .clip(RoundedCornerShape(12.dp))
                    .background(color = Color.Red)
            ) {

            }
        }

    }
}

谁能解释一下为什么会这样？

推荐答案

这就是Box使用propagateMinConstraints参数设置为true的方式。Surface是using它在引擎盖下面。

例如，当Box具有不能直接指定修饰符的内容并且需要对Box的内容设置最小大小时，将propagateMinConstraints设置为true可能很有用。如果propagateMinConstraints设置为true，则Box上设置的最小大小也将应用于内容，否则最小大小将仅应用于框。

因此，第一级Surface子项的最小大小约束等于Surface的大小。

以下是其中一个维护人员explains做出此决定的原因：

Surface不是真正的布局。我们在FloatingActionButton上遇到了这样的问题-我们根据规格设置了最小宽度和高度，但用户可以根据需要设置更大的尺寸。现在FloatingActionButton里面的内容(图标)需要填满Surface的整个大小，所以我们在上面应用一个涟漪，然后用Surface的形状来裁剪涟漪。如果我们只是设置Modifier.fillMaxSize()，它将充满整个屏幕，因为FloatingActionButton没有指定最大大小。并且由于系统的工作方式，没有这样的信息不被传播。因此，我们提出了propagateMinConstraints=true的想法，现在Surface中的内容必须填充应用于Surface的最小大小。老实说，我不确定解释是否足够清楚：)。但是，如果您的Surface中需要一些真实的布局和多个元素，则需要手动添加，因此请添加您自己的Box。

它可以被Modifier.requiredSize覆盖，或者像您在第二个代码示例中所做的那样，使用另一个容器。您的示例中的Column的大小仍然等于父Surface。

这篇关于如果我不将其包装在可组合的列或行中，为什么框可兼容填充最大尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！