Jetpack Compose适配屏幕与字体放大：卡片布局修复方案

针对你遇到的三星设备放大字体和显示尺寸后布局破裂的问题，以下是两种符合需求的可行方案：

方案一：保持XYZ、图标、ABC单行显示 #

通过横向滚动+文本截断的方式，确保核心内容始终单行展示，避免布局错乱：

1. 给包含XYZ、图标、ABC的内层Row添加横向滚动能力
2. 给文本设置单行截断规则，防止换行溢出
3. 固定图标尺寸，避免显示放大时图标过度占用空间

修改后的核心代码：

Row(
    modifier = Modifier
        .padding(start = 16.dp, top = 84.dp, end = 16.dp, bottom = 16.dp)
) {
    Row(
        modifier = Modifier
            .weight(2f)
            .horizontalScroll(rememberScrollState()) // 添加横向滚动支持
            .padding(end = 8.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "XYZ",
            style = TextStyle(color = Color.White, fontSize = 16.sp),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis // 文本过长时自动截断
        )

        Image(
            painter = painterResource(id = R.drawable.ic_close),
            contentDescription = null,
            modifier = Modifier.size(20.dp) // 固定图标尺寸
        )

        Text(
            text = "ABC",
            style = TextStyle(color = Color.White, fontSize = 16.sp),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }

    Text(
        modifier = Modifier.weight(1f),
        text = "13 Nov 2023",
        style = TextStyle(color = Color.White, fontSize = 16.sp),
        textAlign = TextAlign.End,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
    )
}

方案二：将日期堆叠在XYZ与ABC下方 #

把外层的Row改为Column，让日期自然排列在核心内容下方，适配大尺寸显示：

修改后的核心代码：

Column(
    modifier = Modifier
        .padding(start = 16.dp, top = 84.dp, end = 16.dp, bottom = 16.dp)
        .fillMaxWidth()
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = "XYZ",
                style = TextStyle(color = Color.White, fontSize = 16.sp),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )

            Image(
                painter = painterResource(id = R.drawable.ic_close),
                contentDescription = null,
                modifier = Modifier.size(20.dp)
            )

            Text(
                text = "ABC",
                style = TextStyle(color = Color.White, fontSize = 16.sp),
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    }

    Text(
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 8.dp), // 与上方内容拉开间距
        text = "13 Nov 2023",
        style = TextStyle(color = Color.White, fontSize = 16.sp),
        textAlign = TextAlign.End
    )
}

额外优化建议 #

• 保持使用sp作为字体单位，它会自动跟随系统字体缩放规则
• 避免固定高度的padding（比如原代码的top = 84.dp），可改用基于父布局比例的尺寸或wrapContentHeight，防止放大后内容被遮挡
• 保留contentScale = ContentScale.Crop设置，确保背景图在尺寸变化时仍保持合适显示比例

内容的提问来源于stack exchange，提问作者pepperlove