Android Glance AppWidget：如何让布局适配不同屏幕密度与字体缩放？

我正在构建1×1和3x1（横向3个1x1）的Glance AppWidget，布局为垂直堆叠的三个元素：

• 顶部图标 - 可选显示
• 文本 - 始终显示
• 底部图标 - 始终显示

我希望该Widget能在不同设备密度及系统字体大小（用户字体缩放/无障碍设置）下正确渲染。目前增大系统字体大小会导致部分启动器/设备上的文本被截断或图标被挤出视图。

请问在Glance中，让布局稳定适配密度与字体缩放差异的推荐方式是什么？需要关于尺寸模式、dp/sp使用以及Glance专属API（如响应式尺寸）的指导。

附现有代码：

@Composable
internal fun VerticalWidget(
    resId: Int,
    value: Int?,
    shouldShowSyncIcon: Boolean,
    modifier: GlanceModifier = GlanceModifier
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally, modifier = modifier) {
        if (shouldShowSyncIcon) {
            Image(
                modifier = modifier.size(22.dp),
                provider = ImageProvider(resId = R.drawable.ic_sync),
                contentDescription = null,
                colorFilter = ColorFilter.tint(WidgetTheme.colors.icon)
            )
        }
        Spacer(modifier = GlanceModifier.height(4.dp))
        Text(
            text = value?.toString() ?: "-",
            style = TextStyle(
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
            ),
        )
        Spacer(modifier = GlanceModifier.height(6.dp))
        Image(
            provider = ImageProvider(resId = resId),
            contentDescription = null,
            colorFilter = ColorFilter.tint(WidgetTheme.colors.icon),
            modifier = GlanceModifier.size(22.dp)
        )
    }
}

适配方案 #

1. 利用Glance响应式布局约束控制空间分配 #

• 给根Column设置fillMaxSize()，让布局占满Widget的可用空间，避免内容溢出边界
• 用weight分配空间：给文本区域设置weight(1f)，让它优先占据剩余可用空间；图标和间距用weight(0f)固定尺寸，确保图标不会被挤出视图
• 给文本添加sizeIn(maxHeight = ...)限制，防止字体过度缩放导致高度溢出，同时保留缩放灵活性

2. 严格区分dp与sp的使用场景 #

• 图标尺寸、间距使用dp：这类元素不需要跟随字体缩放，保持跨设备的视觉一致性
• 字体大小使用sp：确保文本跟随系统字体缩放，符合无障碍要求，但必须配合尺寸限制避免溢出

3. 保证可选元素的布局稳定性 #

• 用Box包裹可选的顶部图标，即使隐藏时也维持布局结构的一致性，避免显示/隐藏操作导致整体布局偏移
• 动态调整顶部间距：根据是否显示顶部图标设置不同的间距值，避免布局出现空白或拥挤

4. 适配多尺寸Widget #

• 可通过LocalSize获取当前Widget的尺寸，动态调整字体大小、图标尺寸或间距，适配1×1和3x1两种Widget规格
• 对3x1的横向Widget，给每个子Widget设置fillMaxHeight()，确保垂直方向占满空间

修改后的示例代码 #

@Composable
internal fun VerticalWidget(
    resId: Int,
    value: Int?,
    shouldShowSyncIcon: Boolean,
    modifier: GlanceModifier = GlanceModifier
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = modifier.fillMaxSize().padding(8.dp) // 添加内边距避免内容贴边
    ) {
        // 用Box包裹顶部图标，维持布局结构稳定
        Box(modifier = GlanceModifier.weight(0f)) {
            if (shouldShowSyncIcon) {
                Image(
                    modifier = GlanceModifier.size(22.dp),
                    provider = ImageProvider(resId = R.drawable.ic_sync),
                    contentDescription = null,
                    colorFilter = ColorFilter.tint(WidgetTheme.colors.icon)
                )
            }
        }
        
        // 根据顶部图标显示状态动态调整间距
        val topSpacing = if (shouldShowSyncIcon) 4.dp else 0.dp
        Spacer(modifier = GlanceModifier.height(topSpacing).weight(0f))
        
        // 文本区域：占据剩余空间，限制最大高度避免溢出
        Text(
            text = value?.toString() ?: "-",
            style = TextStyle(
                fontSize = 16.sp,
                textAlign = TextAlign.Center,
            ),
            modifier = GlanceModifier
                .weight(1f)
                .sizeIn(maxHeight = 40.dp)
                .wrapContentSize(align = Alignment.Center),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis // 溢出时显示省略号
        )
        
        Spacer(modifier = GlanceModifier.height(6.dp).weight(0f))
        
        // 底部图标：固定尺寸不参与空间分配
        Image(
            provider = ImageProvider(resId = resId),
            contentDescription = null,
            colorFilter = ColorFilter.tint(WidgetTheme.colors.icon),
            modifier = GlanceModifier.size(22.dp).weight(0f)
        )
    }
}

测试建议 #

• 在开发者选项中调整"字体大小"和"显示大小"，测试不同缩放级别下的布局表现
• 测试不同启动器（如Pixel Launcher、三星One UI Launcher等）的渲染效果，因为不同启动器对Widget的空间计算可能存在差异

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