制作可组合的包装内容 - Jetpack Compose

Question

我正在尝试使ImageComposable根据其内容包装其高度和宽度，以及两个Text可组合，对齐到Assemble可组合的底部。 以下是代码：

@Composable
fun ImageComposable(url:String){
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current).data(url).apply{
            placeholder(drawableResId = R.drawable.ic_broken_pic)
        }.build()
    )
    Image(painter = painter, contentDescription = null, Modifier.padding(2.dp).border(width = 2.dp, shape = CircleShape, color = MaterialTheme.colors.onPrimary)

}

@Composable
fun Assemble(url:String){
    Column (modifier = Modifier.fillMaxWidth().height(400.dp).background(MaterialTheme.colors.primary)
        .padding(16.dp), verticalArrangement = Arrangement.Bottom) {
        ImageComposable(url)
        Text(text = "title")
        Text(text = "Body")
    }
}

但是ImageComposable最终占据了Assemble可组合的所有高度和宽度，我无法看到我在column中添加的两个Text可组合。 所以我很困惑这里的确切问题是什么。 我认为至少它应该显示ImageComposable以及两个Text可组合但它没有发生。

我在这里使用coil图像加载库来解析来自 url 的图像。 现在在测试中，我将 url 作为Empty String传递。 因此，我称可组合为：
Assemble("")

我没有找到任何可以帮助我理解这种行为的文档。 所以我想知道这个问题的原因以及克服它的可能解决方案。

Answer 1

您可以明确指定每个组件的高度：

fun ImageComposable(modifier: Modifier = Modifier, url: String){
//...
    Image(modifier = modifier, //...
}

Column(//..
   ImageComposable(modifier = Modifier.height(200.dp)//...
   Text(modifier = Modifier.height(50.dp)//...
   Text(modifier = Modifier.height(150.dp)//...
}

或者您可以指定它将占用的最大高度的一部分：

fun ImageComposable(modifier: Modifier = Modifier, url: String){
//...
    Image(modifier = modifier, //...
}

Column(//..
   ImageComposable(modifier = Modifier.fillMaxHeight(0.75f)//...
   Text(modifier = Modifier.fillMaxHeight(0.1f)//...
   Text(modifier = Modifier.fillMaxHeight(0.15f)//...
}

您也可以尝试使用权重修改器：

fun ImageComposable(modifier: Modifier = Modifier, url: String){
//...
    Image(modifier = modifier, //...
}

Column(//..
   ImageComposable(modifier = Modifier.weight(1f)//...
   Text(modifier = Modifier.weight(1f, fill = false)//...
   Text(modifier = Modifier.weight(1f, fill = false)//...
}

Answer 2

如果您想要实现的目标有一个草图，那么解决您的问题会更容易。

不过，我希望我能提供帮助：看起来您面临的问题可以通过Compose layouts 中的 Intrinsic 测量来处理。

该列单独测量每个孩子，而没有限制图像大小的文本尺寸。 为此，可以使用Intrinsics 。

Intrinsics 允许您在实际测量孩子之前查询它们。

例如，如果您询问具有无限宽度的 Text 的 minIntrinsicHeight，它将返回 Text 的高度，就好像文本是在单行中绘制的一样。

通过使用IntrinsicSize.Max作为Assemble可组合的width ，如下所示：

@Composable
fun Assemble(url: String) {
    Column(
        modifier = Modifier
            .width(IntrinsicSize.Max)
            .background(MaterialTheme.colors.primary)
            .padding(16.dp), verticalArrangement = Arrangement.Bottom
    ) {
        ImageComposable(url)
        Text(text = "title")
        Text(text = "Body")
    }
}

您可以创建这样的布局：

（请注意，我在这里使用的是本地可绘制对象）

您现在可以看到 2 个文本，并且图像的宽度已调整为文本的宽度。

使用Intrinsics来衡量相互依赖的孩子应该可以帮助您实现您想要的。

如果此布局不符合您的期望，请告诉我。