如何使用Jetpack Compose创建桌面或锁屏Widget

首先明确：目前Jetpack Compose本身不直接支持原生Widget组件（App Widget），因为原生Widget基于RemoteViews，而Compose是基于独立UI树的渲染框架，两者底层机制不同。不过可以通过以下两种方案实现Compose风格的Widget：

方案1：用ComposeView封装RemoteViews（仅桌面Widget推荐） #

Android 12及以上支持在RemoteViews中嵌入ComposeView，可实现桌面Widget的Compose化，步骤如下：

• 继承AppWidgetProvider，在onUpdate方法中构建RemoteViews
• 通过RemoteViews.setContent嵌入Compose UI代码
• 注意：锁屏Widget（Keyguard Widget）对ComposeView的兼容性较差，多数厂商系统会限制此类用法

示例代码：

class ComposeWidgetProvider : AppWidgetProvider() {
    override fun onUpdate(
        context: Context,
        appWidgetManager: AppWidgetManager,
        appWidgetIds: IntArray
    ) {
        appWidgetIds.forEach { widgetId ->
            val remoteViews = RemoteViews(context.packageName, R.layout.widget_container).apply {
                setContent(R.id.compose_view) {
                    // 编写你的Compose UI逻辑
                    Column(
                        modifier = Modifier.fillMaxSize().padding(16.dp),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text("Compose桌面Widget", style = MaterialTheme.typography.titleMedium)
                        Text("当前时间: ${LocalTime.now()}", style = MaterialTheme.typography.bodySmall)
                    }
                }
            }
            appWidgetManager.updateAppWidget(widgetId, remoteViews)
        }
    }
}

配套布局文件widget_container.xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

方案2：使用Glance库（官方推荐的Compose风格Widget方案） #

Google推出的Glance库是专为App Widget设计的Compose兼容框架，用声明式语法编写，底层仍基于RemoteViews，完美支持桌面Widget，锁屏Widget需看系统版本适配：

• 依赖配置（在build.gradle中添加）：

dependencies {
    implementation "androidx.glance:glance-appwidget:1.0.0"
    implementation "androidx.glance:glance-material3:1.0.0"
}

• 创建Glance Widget类：

class MyGlanceWidget : GlanceAppWidget() {
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            MaterialTheme {
                Column(
                    modifier = GlanceModifier.fillMaxSize().padding(16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text("Glance Compose Widget", style = MaterialTheme.typography.titleMedium)
                    Text("更新时间: ${LocalDateTime.now()}", style = MaterialTheme.typography.bodySmall)
                }
            }
        }
    }
}

• 注册Widget（在AndroidManifest.xml中声明）：

<receiver android:name=".MyGlanceWidgetReceiver">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/widget_info" />
</receiver>

widget_info.xml为Widget配置文件，需定义大小、更新周期等基础属性。

锁屏Widget的额外注意事项 #

• Android 12及以上系统原生支持锁屏Widget，但小米、华为等厂商可能有自定义限制，需实际测试适配
• Glance库可通过GlanceModifier.isScreenLockEnabled()声明支持锁屏，但效果依赖系统
• 原生ComposeView嵌入锁屏Widget易出现权限或渲染异常，不推荐优先使用

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