Glance 提供了一个用于管理颜色主题的 API。对于其他样式属性
(例如 TextStyle
),请声明顶级变量。
添加颜色
Glance 提供开箱即用的 Material 颜色实现。要使用
使用 GlanceTheme
封装顶级可组合项,如
请参见以下示例。
在支持动态配色的设备上,此主题从
用户特定的平台颜色在其他设备上,此设置会回退到 Material
基准主题。使用 GlanceTheme.colors
根据封装后的颜色设置样式
主题。您可以在需要颜色的任何位置使用主题中的这些值。
override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { GlanceTheme { MyContent() } } } @Composable private fun MyContent() { Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
如需自定义主题,您可以将 colors
传递给 GlanceTheme
。一览
提供 androidx.glance:glance-material
互操作性库,以便实现
Material 2 和 androidx.glance:glance-material3
(适用于 Material 3 颜色)
联系。
例如,向 ColorProviders
提供应用的现有 Material 颜色。
创建 Glance 配色方案的 API,如以下代码段所示:
// Remember, use the Glance imports // import androidx.glance.material3.ColorProviders // Example Imports from your own app // import com.example.myapp.ui.theme.DarkColors // import com.example.myapp.ui.theme.LightColors object MyAppWidgetGlanceColorScheme { val colors = ColorProviders( light = LightColors, dark = DarkColors ) }
提供从方案到包装所有商品的 GlanceTheme
的颜色
可组合项,如以下示例所示:
override suspend fun provideGlance(context: Context, id: GlanceId) { // ... provideContent { GlanceTheme(colors = MyAppWidgetGlanceColorScheme.colors) { MyContent() } } } @Composable private fun MyContent() { Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
如果您更喜欢使用壁纸中的动态配色(如果支持),并且您的
应用的配色方案;否则,您可以有条件地传递应用的配色方案
在 GlanceTheme
中。如以下代码段所示:
override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { GlanceTheme( if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) GlanceTheme.colors else MyAppWidgetGlanceColorScheme.colors ) { MyContent() } } } @Composable private fun MyContent() { // ... Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
添加形状
如需为应用 widget 提供特殊的形状或阴影,请使用 Android 可绘制对象 API。
例如,以下代码段展示了如何创建可绘制对象(形状):
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="16dp"/>
<stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>
将其提供给目标可组合项:
GlanceModifier.background( imageProvider = ImageProvider(R.drawable.button_outline) )