ใช้ธีมข้อมูลโดยย่อ

Glance มี API สำหรับจัดการธีมสี สำหรับแอตทริบิวต์รูปแบบอื่นๆ เช่น TextStyle ให้ประกาศตัวแปรระดับบนสุด

เพิ่มสี

Glance นำเสนอสี Material ให้ใช้งานตั้งแต่แกะกล่อง วิธีใช้ ธีมในตัว รวมระดับบนสุดของคุณ Composable ด้วย GlanceTheme ดังที่แสดงใน ตัวอย่างต่อไปนี้

ในอุปกรณ์ที่รองรับสีแบบไดนามิก ธีมนี้มาจาก สีแพลตฟอร์มเฉพาะของผู้ใช้ บนอุปกรณ์อื่นๆ การดำเนินการนี้จะกลับไปที่วัสดุ ธีมพื้นฐาน ใช้ 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 สำหรับ วัสดุ 2 และ androidx.glance:glance-material3 สำหรับสีวัสดุ 3 การสนับสนุน

เช่น ระบุสีวัสดุที่มีอยู่ของแอปให้กับ ColorProviders 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 ที่ครอบคลุมทั้งหมด Composable ดังที่ปรากฏในตัวอย่างต่อไปนี้

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 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

ระบุให้กับ Composable เป้าหมาย:

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

ก่อนหน้า
สร้าง UI ด้วยข้อมูลโดยย่อ
ถัดไป
สรุปความสามารถในการทำงานร่วมกัน