ธีมใน Jetpack Compose ประกอบด้วยโครงสร้างระดับล่างหลายรายการ
และ API ที่เกี่ยวข้อง คุณดูค่าเหล่านี้ได้ในซอร์สโค้ดของ MaterialTheme และยังนำไปใช้ในระบบการออกแบบที่กำหนดเองได้ด้วย
คลาสระบบธีม
โดยปกติแล้ว ธีมจะประกอบด้วยระบบย่อยหลายระบบที่จัดกลุ่มแนวคิดด้านภาพและ ลักษณะการทำงานที่พบบ่อย ระบบเหล่านี้สามารถสร้างแบบจำลองด้วยคลาสที่มี ค่าการจัดธีม
เช่น MaterialTheme ประกอบด้วย
ColorScheme
(ระบบสี)
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
ซึ่งช่วยให้สามารถอ้างอิงค่าการจัดธีมแบบคงที่ในฟังก์ชันที่ใช้ Compose ได้
ดูข้อมูลเพิ่มเติมเกี่ยวกับ CompositionLocal ได้ที่
คู่มือข้อมูลที่กำหนดขอบเขตในเครื่องด้วย CompositionLocal
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 หลัก โดยจะสร้างอินสแตนซ์
ของระบบธีม CompositionLocals โดยใช้ค่าจริงและตรรกะ
ที่จำเป็น ซึ่งจะส่งไปยังแผนผังการจัดองค์ประกอบด้วย
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 Design 3 ใน Compose