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

【问题标题】：Make composable wrap content - Jetpack Compose制作可组合的包装内容 - Jetpack Compose
【发布时间】：2022-07-19 16:44:02
【问题描述】：

我正在尝试使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("")

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

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案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)//...
}

【讨论】：

这个答案是完全错误的。他在问如何包装组件，而您通过提供固定尺寸来提供解决方法

【解决方案2】：

如果有你想要达到的目标的草图，解决你的问题会更容易。

不过，我希望我能提供帮助：看来您遇到的问题可以由Intrinsic measurements in Compose layouts 处理。

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

Intrinsics 可让您在实际测量子项之前对其进行查询。

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

通过将IntrinsicSize.Max 用于width 的Assemble 组合，如下所示：

@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 衡量相互依赖的孩子应该可以帮助您实现您想要的。

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

【讨论】：