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
。Glance 提供適用於 Material 2 的 androidx.glance:glance-material
互通性程式庫,以及適用於 Material 3 顏色的 androidx.glance:glance-material3
。
舉例來說,您可以將應用程式現有的材質顏色提供給 ColorProviders
API,建立 Glance 色彩配置,如以下程式碼片段所示:
// 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), // ... ) }
新增形狀
如要為應用程式小工具提供特殊形狀或陰影,請使用 Android Drawables 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) )