制作可复合的包装内容 - 杰特背包构成

Question

我正在尝试使 Imagocosable 根据其内容包装其高度和宽度，以及两个 text 可复合，与 coptement 可理解。以下是为此的代码：

@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")
    }
}

但是 Imagecosable 最终取得了组装 composable的所有高度和宽度，我看不到两个 text 我在列中添加的组件。因此，我对这里的确切问题感到困惑。我认为至少应该显示 Imagecosable 以及两个 text 可复合，但没有发生。

我正在此处使用 coil 图像加载库以从URL解析图像。现在，在测试中，我将URL作为空字符串传递。因此，我将组合称为：
组装（“”）

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

Answer 1

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

尽管如此，我希望我能提供帮助：
看来您面临的问题可以通过“ nofollow noreferrer”> instossic intinsic insinsic测量/a>。

该列分别测量每个孩子，而没有文本的尺寸约束图像大小。对于此内在可以使用。

内在的信息可以让您在实际测量之前查询孩子。

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

通过使用 intrinsicsize.max 用于 width 的组装 composoble as ass as ass as ass：

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

使用 Interins 来衡量彼此依赖的儿童应帮助您实现所需的目标。

请让我知道该布局是否不符合您的期望。

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