Android Glance 小部件文本未在行内正确截断

Question

我正在使用 Jetpacklance 框架在 Android 中创建小部件，并且在行内使用文本时遇到问题。

预期行为：-文本一旦触及行内的其他元素就应被截断

实际行为：- 文本首先将其他元素推出视图，然后截断

这是问题截图

这样就好了

这不是

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

Answer 1

您的中间列（或者我们称之为组，因为您没有第一个/最左边的垂直组的明确列）需要能够增长并获得尽可能多的空间，而无需踩到第三个（最右边的垂直组） ） 柱子。为此，您需要让最右边的列根据其内容占用所需的空间（WrapContentWidth），并通过将其权重（在行范围内可用）设置为 1f（即，乍一看，是defaultWeight())。

以下是简化版本。不同宽度的预览以及文本如何增长/截断。

@Composable
@OptIn(ExperimentalGlancePreviewApi::class)
@Preview(widthDp = 340, heightDp = 100)
@Preview(widthDp = 230, heightDp = 100)
@Preview(widthDp = 130, heightDp = 100)
fun Test(){

    Box(modifier = GlanceModifier.padding(14.dp)) {
            Row(
                modifier = GlanceModifier.fillMaxWidth(),
                horizontalAlignment = Alignment.Horizontal.CenterHorizontally,
                verticalAlignment = Alignment.Vertical.CenterVertically
            ) {
                Image(
                    provider = ImageProvider(R.drawable.sun_68),
                    contentDescription = null,
                    modifier = GlanceModifier.size(30.dp),
                    contentScale = ContentScale.Crop)

               Column (
                        modifier = GlanceModifier.padding(1.dp).defaultWeight(),
                        horizontalAlignment = Alignment.Horizontal.Start,
                        verticalAlignment = Alignment.Vertical.CenterVertically
                        )
                {
                    Text(
                        text = "This text can be truncated or it can fit ",
                        modifier = GlanceModifier.padding(horizontal = 8.dp),
                        style = TextStyle(
                            color = ColorProvider(day = Color.White, night = Color.White),
                            fontSize = 14.sp
                        ),
                        maxLines = 1)
                    Text(
                        text = "But it will not push out rightmost column",
                        modifier = GlanceModifier.padding(horizontal = 8.dp),
                        style = TextStyle(
                            color = ColorProvider(day = Color.White, night = Color.White),
                            fontSize = 10.sp
                        ),
                        maxLines = 1)
                }
                Column (
                    modifier = GlanceModifier.wrapContentWidth(),
                    horizontalAlignment = Alignment.Horizontal.Start,
                    verticalAlignment = Alignment.Vertical.CenterVertically
                ){
                    Text(
                        "Right",
                        maxLines = 1)
                    Text(
                        "side",
                        maxLines = 1)
                }
       }
    }
}