Jetpack Glance Widget仅空白区域可点击，文本与图片无法触发点击

问题场景 #

在Glance Widget的Column布局内，Tile包含文本和图片，为Row添加clickable修饰符后，仅空白区域能触发点击；使用alpha-05版本，不希望回退到alpha-03。

问题原因 #

Glance Widget的事件处理逻辑与常规Jetpack Compose不同，Text、Image等子组件默认会拦截点击事件，导致父布局（Row）的clickable只能在未被子组件覆盖的空白区域生效。即使给子Column添加clickable，也无法正常触发，因为Glance的事件传递机制不支持这种嵌套点击绑定。

解决方案 #

通过给子组件（Text、Image）添加interactable(false)修饰符，禁止它们拦截点击事件，让父Row的clickable能覆盖整个Tile区域。同时移除子Column上无效的clickable修饰符，避免冗余。

修改后的代码示例 #

@Composable
private fun ListWidgetTile(
    model: ListWidgetData,
    isDark: Boolean,
    bottomPadding: Dp,
    topPadding: Dp,
    type: WidgetCategoryEnum,
) {
    val action = // 业务相关逻辑
    val intent = Intent(
        Intent.ACTION_VIEW,
        "${URL}/${Screens.Splash.navigateWithDeepLink(DeepLinkModel(model.id, action))}".toUri()
    )
    val bitmap = if(model.image != "") {
        model.image.decodeToBase64()
    } else {
        null
    }
    Row(
        modifier = GlanceModifier
            .fillMaxWidth()
            .padding(
                start = 24.dp,
                end = 15.dp,
                bottom = bottomPadding,
                top = topPadding
            )
            .clickable(
                actionStartActivity(intent)
            )
    ) {
        Column(
            modifier = GlanceModifier
                .fillMaxWidth()
                .defaultWeight()
                .padding(end = 8.dp)
            // 移除这里无效的clickable
        ) {
            Text(
                text = model.source,
                style = TextStyle(
                    fontSize = 8.sp,
                    fontWeight = FontWeight.Medium,
                    color = ColorProvider(
                        resId = if (isDark)
                            R.color.dark_list_widget_source_time_color
                        else
                            R.color.light_list_widget_source_time_color
                    )
                ),
                modifier = GlanceModifier
                    .padding(bottom = 8.dp)
                    .interactable(false) // 禁止拦截点击
            )
            Text(
                text = model.title,
                style = TextStyle(
                    fontSize = 16.sp,
                    fontWeight = FontWeight.Bold,
                    color = ColorProvider(
                        resId = if (isDark)
                            R.color.dark_list_widget_title_color
                        else
                            R.color.light_list_widget_title_color
                    )
                ),
                maxLines = 3,
                modifier = GlanceModifier.interactable(false) // 禁止拦截点击
            )
        }
        if (bitmap != null) {
            Image(
                provider = ImageProvider(bitmap),
                contentDescription = "Image",
                modifier = GlanceModifier
                    .size(70.dp)
                    .imageCornerRadius()
                    .interactable(false) // 禁止拦截点击
                ,
                contentScale = ContentScale.Crop
            )
        }
    }
}

补充说明 #

如果上述方法无效，可以尝试以下替代方案：

• 给所有子组件单独绑定相同的clickable事件（不推荐，会产生冗余代码）；
• 检查Glance版本是否存在未修复的bug，若alpha-05仍有问题，可尝试升级到更高版本的alpha/beta版本。

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