如何在 Jetpack Compose 中构建自适应布局答案

【问题标题】：How to build an adaptive layout in Jetpack Compose如何在 Jetpack Compose 中构建自适应布局
【发布时间】：2022-09-27 14:11:13
【问题描述】：

所以我试图按照这个文档来实现类似于documentation 的东西，这就是 CardTitle 移动和图像的位置；但是本文档中的 Title 和 Description 现在似乎在卡片上不可用？当我尝试创建卡片时，我无法访问它。最大的问题卡不再有描述，也许这需要更新或者我该如何实现这一点。我正在尝试类似于显示的图像的东西。

文档中的代码。

   @Composable
    fun Card(
        imageUrl: String,
        title: String,
        description: String
    ) {
        var showMore by remember { mutableStateOf(false) }
    
        BoxWithConstraints {
            if (maxWidth < 400.dp) {
                Column {
                    Image(imageUrl)
                    Title(title)
                }
            } else {
                Row {
                    Column {
                        Title(title)
                        Description(
                            description = description,
                            showMore = showMore,
                            onShowMoreToggled = { newValue ->
                                showMore = newValue
                            }
                        )
                    }
                    Image(imageUrl)
                }
            }
        }
    }

标签： android-jetpack-compose jetpack

【解决方案1】：

最大的问题卡没有描述了，也许这需要要更新或如何实现这一点。我正在尝试做某事类似于显示的图像。

这不是问题，因为上面的示例使用BoxWithConstraints 演示基于屏幕大小的灵活布局。当你构建你的布局时，你没有遵循这个确切的模式。

您可以通过多种方式做到这一点，包括
Column {
   Image(imageUrl)
   Title(title)
   // You can add a description that is one line with ellipsis overflow for instance. Or it's font size can be smaller than title
}
在您的示例中，当屏幕尺寸小于 400.dp 时，演示者倾向于不显示。

BoxWithConstraints 适用于根据其Constraints 的最大或最小宽度/高度构建选择性布局

【讨论】：