ธีมใน Jetpack Compose สร้างขึ้นจากโครงสร้างระดับล่างจำนวนหนึ่ง
และ API ที่เกี่ยวข้อง โดยสามารถดูได้ใน
ซอร์สโค้ด
MaterialTheme
และสามารถใช้ในระบบการออกแบบที่กำหนดเองได้อีกด้วย
คลาสระบบธีม
ธีมมักจะประกอบด้วยระบบต่างๆ ที่จัดกลุ่มภาพและ แนวคิดเชิงพฤติกรรม ระบบเหล่านี้สามารถนำไปสร้างแบบจำลองด้วยคลาสที่มี การกำหนดธีม
ตัวอย่างเช่น MaterialTheme
ประกอบด้วย
Colors
(ระบบสี)
Typography
(ระบบการพิมพ์) และ
Shapes
(ระบบรูปร่าง)
@Immutable data class ColorSystem( val color: Color, val gradient: List<Color> /* ... */ ) @Immutable data class TypographySystem( val fontFamily: FontFamily, val textStyle: TextStyle ) /* ... */ @Immutable data class CustomSystem( val value1: Int, val value2: String /* ... */ ) /* ... */
การเรียบเรียงในระบบธีม
คลาสระบบธีมจะมีให้โดยปริยายของโครงสร้างองค์ประกอบดังนี้
CompositionLocal
อินสแตนซ์ วิธีนี้ทำให้ค่าการกำหนดธีมสามารถอ้างอิงแบบคงที่ใน Composable ได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ CompositionLocal
ได้ที่
ข้อมูลที่กําหนดขอบเขตเฉพาะพื้นที่ด้วย CompositionLocal Guide
val LocalColorSystem = staticCompositionLocalOf { ColorSystem( color = Color.Unspecified, gradient = emptyList() ) } val LocalTypographySystem = staticCompositionLocalOf { TypographySystem( fontFamily = FontFamily.Default, textStyle = TextStyle.Default ) } val LocalCustomSystem = staticCompositionLocalOf { CustomSystem( value1 = 0, value2 = "" ) } /* ... */
ฟังก์ชันธีม
ฟังก์ชันของธีมคือจุดแรกเข้าและ API หลัก สร้างอินสแตนซ์
ของระบบธีม CompositionLocal
วินาที — โดยใช้ค่าจริงกับตรรกะใดๆ
(จำเป็น) ซึ่งมีให้กับแผนผังองค์ประกอบพร้อมกับ
CompositionLocalProvider
พารามิเตอร์ content
อนุญาตให้ Composable ที่ซ้อนกันเข้าถึงค่าธีมได้
ที่สัมพันธ์กับลำดับชั้น
@Composable fun Theme( /* ... */ content: @Composable () -> Unit ) { val colorSystem = ColorSystem( color = Color(0xFF3DDC84), gradient = listOf(Color.White, Color(0xFFD7EFFF)) ) val typographySystem = TypographySystem( fontFamily = FontFamily.Monospace, textStyle = TextStyle(fontSize = 18.sp) ) val customSystem = CustomSystem( value1 = 1000, value2 = "Custom system" ) /* ... */ CompositionLocalProvider( LocalColorSystem provides colorSystem, LocalTypographySystem provides typographySystem, LocalCustomSystem provides customSystem, /* ... */ content = content ) }
ออบเจ็กต์ธีม
การเข้าถึงระบบธีมจะทำผ่านออบเจ็กต์ที่มีคุณสมบัติด้านความสะดวก สำหรับ ความสอดคล้อง ทำให้วัตถุมีแนวโน้มที่จะได้รับการตั้งชื่อเหมือนกับฟังก์ชันของธีม จะรับบทประพันธ์เพลงที่มีอยู่ภายในเครื่องเท่านั้น
// Use with eg. Theme.colorSystem.color object Theme { val colorSystem: ColorSystem @Composable get() = LocalColorSystem.current val typographySystem: TypographySystem @Composable get() = LocalTypographySystem.current val customSystem: CustomSystem @Composable get() = LocalCustomSystem.current /* ... */ }
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- ข้อมูลที่กำหนดขอบเขตเฉพาะพื้นที่ด้วย CompositionLocal
- ระบบการออกแบบที่กำหนดเองใน Compose
- ดีไซน์ Material 2 ใน Compose