本頁面由 Cloud Translation API 翻譯而成。

實作 Glance 主題

Glance 提供 API，可用來管理色彩主題。如果是其他樣式屬性例如 TextStyle，宣告頂層變數。

新增顏色

Glance 提供立即實作的 Material 色彩。如要使用內建主題，使用 GlanceTheme 納入頂層可組合項，如如以下範例所示

在支援動態色彩的裝置上，這個主題是由不同使用者的平台色彩在其他裝置上，這項設定會改回使用 Material Design 基準主題。使用 GlanceTheme.colors 根據已包裝的顏色設定樣式主題。您可以在需要顏色的任何位置使用主題中的這些值。

override suspend fun provideGlance(context: Context, id: GlanceId) {

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}GlanceSnippets.kt

若要自訂主題，您可以將 colors 傳遞至 GlanceTheme。資訊一覽提供了 androidx.glance:glance-material 互通性程式庫 Material 2 和 androidx.glance:glance-material3 代表 Material 3 顏色聯絡。

舉例來說，您可以將應用程式現有的質感設計顏色提供給 ColorProviders 建立 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
    )
}GlanceSnippets.kt

將配置中的顏色提供給 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),
        // ...
    )
}GlanceSnippets.kt

在支援的情況下，使用桌布中的動態色彩。否則，您可以有條件地傳遞應用程式的色彩配置 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),
        // ...
    )
}GlanceSnippets.kt

新增形狀

如要為應用程式小工具提供特殊形狀或陰影，請使用 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>button_outline.xml

將其提供給目標可組合項：

GlanceModifier.background(
    imageProvider = ImageProvider(R.drawable.button_outline)
)GlanceSnippets.kt

使用 Glance 建構 UI

資訊一覽互通性