Android Glance Widget中Row内文本截断异常问题求助

问题现象 #

• 预期行为：文本在接触到Row内其他元素时自动截断
• 实际行为：文本会先将右侧的连续天数模块挤出视图范围，之后才会进行截断

状态截图 #

• 正常状态
  
• 异常状态
  

相关代码 #

Box(modifier = GlanceModifier.background(ColorProvider(day = backgroundColor, night = backgroundColorDark))
            .padding(
                    horizontal = 14.dp,
                    vertical = 14.dp).clickable(onClick = actionStartActivity<MainActivity>(context, Uri.parse(widgetUri)))) {
   Column(
                    modifier = GlanceModifier.fillMaxSize(),
                    verticalAlignment = Alignment.Vertical.Top,
                    horizontalAlignment = Alignment.Horizontal.Start,
            ) {
                Row(
                        modifier = GlanceModifier.fillMaxWidth(),
                        horizontalAlignment = Alignment.Horizontal.CenterHorizontally,
                        verticalAlignment = Alignment.Vertical.CenterVertically
                ) {


                    Row(
                            verticalAlignment = Alignment.Vertical.CenterVertically)
                    {
                        Box (
                                modifier = GlanceModifier.clickable(onClick = actionRunCallback<ToggleAction>(
                                        parameters = actionParametersOf(habitIdKey to habitId)
                                ))
                        ) {
                            Image(
                                    provider = ImageProvider(R.drawable.check_24), contentDescription = null,
                                    colorFilter = ColorFilter.tint(


                                            if (isTodayCompleted)
                                                ColorProvider(day = Color.White, night = Color.White)
                                            else
                                                ColorProvider(day = getColor(backgroundColor), night = getColor(backgroundColor))

                                    ),
                                    modifier = GlanceModifier
                                            .size(30.dp)
                                            .then(
                                                    if (isTodayCompleted) {
                                                        GlanceModifier.background(
                                                                imageProvider = ImageProvider(R.drawable.fab_shape),
                                                                colorFilter = ColorFilter.tint(ColorProvider(day = getColor(backgroundColor), night = getColor(backgroundColor)))
                                                        ) // Apply background when today is completed
                                                    } else {
                                                        GlanceModifier.background(
                                                                imageProvider = ImageProvider(R.drawable.fab_outline),
                                                                colorFilter = ColorFilter.tint(ColorProvider(day = getColor(backgroundColor), night = getColor(backgroundColor)))
                                                        ) // Apply border when today is not completed
                                                    }
                                            )
                            )
                        }
                     Column(modifier = GlanceModifier.padding(horizontal = 10.dp))

                        {
                         Text("${DateFormat.format("MMMM",today)}",
                                maxLines = 1,
                                 style = TextStyle(

                                         color = ColorProvider(day = Color.Gray, night = Color.Gray),
                                         fontWeight = FontWeight.Normal,
                                         textAlign = TextAlign.Start,
                                         fontSize = 12.sp))
                            Text("$title",
                                    maxLines = 1,

                                    style = TextStyle(
                                            color = ColorProvider(day = textColor, night = textColorDark),
                                            fontWeight = FontWeight.Medium,
                                            textAlign = TextAlign.Start,

                                            fontSize = 16.sp))

                     }

                    }
                    Spacer(GlanceModifier.defaultWeight())
                    Column(
                            verticalAlignment = Alignment.Vertical.CenterVertically,
                            horizontalAlignment = Alignment.Horizontal.CenterHorizontally,
                    ) {
                        Row(
                                horizontalAlignment = Alignment.Horizontal.CenterHorizontally,
                                verticalAlignment = Alignment.Vertical.CenterVertically
                        ) {

                            Text("$currentStreak",

                                    style = TextStyle(
                                            color = ColorProvider(day = textColor, night = textColorDark),
                                            fontWeight = FontWeight.Bold,
                                            textAlign = TextAlign.Start,
                                            fontSize = 14.sp))
                            Image(
                                    provider = ImageProvider(if (isTodayCompleted)
                                        R.drawable.fire_filled
                                    else R.drawable.fire_outline
                                    ), contentDescription = null,
                                    colorFilter = ColorFilter.tint(ColorProvider(day = getColor(backgroundColor), night = getColor(backgroundColor))),
                                    modifier = GlanceModifier.size(14.dp)
                            )
                        }
                        Text(
                                if (currentStreak.toInt() == 1) "DAY" else
                                    "DAYS",
                                modifier = GlanceModifier.padding(horizontal = 2.dp),
                                style = TextStyle(
                                        color = ColorProvider(day = textColor, night = textColorDark),
                                        fontWeight = FontWeight.Normal,
                                        textAlign = TextAlign.Start,
                                        fontSize = 10.sp))
                    }
                }
            }

解决方案 #

问题根源是左侧承载文本的Column没有宽度限制，会优先抢占所有可用空间，导致右侧元素被挤出。需要通过以下修改实现文本提前截断：

修改关键代码片段 #

// 调整左侧文本所在Column的Modifier，并给Text添加省略号设置
Column(
    modifier = GlanceModifier
        .padding(horizontal = 10.dp)
        .defaultWeight() // 分配Row剩余可用空间
        .fillMaxWidth() // 填充分配到的宽度
) {
    Text(
        "${DateFormat.format("MMMM",today)}",
        maxLines = 1,
        ellipsize = TextOverflow.Ellipsis, // 显式设置截断后显示省略号
        style = TextStyle(
            color = ColorProvider(day = Color.Gray, night = Color.Gray),
            fontWeight = FontWeight.Normal,
            textAlign = TextAlign.Start,
            fontSize = 12.sp
        )
    )
    Text(
        "$title",
        maxLines = 1,
        ellipsize = TextOverflow.Ellipsis, // 显式设置截断后显示省略号
        style = TextStyle(
            color = ColorProvider(day = textColor, night = textColorDark),
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Start,
            fontSize = 16.sp
        )
    )
}

逻辑说明 #

1. defaultWeight()：让Column在Row中仅占用剩余空间，避免无限制扩展
2. fillMaxWidth()：确保Column填充分配到的宽度，触发文本截断逻辑
3. ellipsize = TextOverflow.Ellipsis：Glance中需要显式设置，才能让超长文本显示省略号

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