制作可组合的包装内容 - 喷气背包撰写

提问者：小点点

制作可组合的包装内容 - 喷气背包撰写

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

@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 最终占用了组装可组合物的所有高度和宽度，我无法看到我在列中添加的两个文本可组合物。所以我对这里的确切问题感到困惑。我认为至少它应该显示图像可组合以及两个可组合的文本，但它没有发生。

我在这里使用线圈图像加载库来解析来自 url 的图像。目前在测试中，我将 url 作为空字符串传递。因此，我将可组合称为：
组装（“”）

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

共2个答案

匿名用户

您可以显式指定每个组件的高度：

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)//...
}

匿名用户

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

不过，我希望我能提供帮助：看起来您面临的问题可以通过撰写布局中的内在测量来处理。

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

内联函数允许您在实际测量孩子之前查询孩子。

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

通过使用IntrinsicSize.Max作为组装可组合的宽度，如下所示：

@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 个文本，并且图像的宽度调整为文本的宽度。

使用内在来衡量孩子彼此依赖应该可以帮助你实现你想要的。

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