พื้นฐานของสไตล์

คุณใช้รูปแบบได้ 3 วิธีทั่วทั้งแอป ดังนี้

  1. ใช้โดยตรงกับคอมโพเนนต์ที่มีอยู่ซึ่งแสดงพารามิเตอร์ Style
  2. ใช้รูปแบบด้วย Modifier.styleable ในเลย์เอาต์ Composables ที่ไม่ยอมรับพารามิเตอร์ Style
  3. ในระบบการออกแบบที่กำหนดเอง ให้ใช้ Modifier.styleable{} และแสดงพารามิเตอร์สไตล์ในคอมโพเนนต์ของคุณเอง

พร็อพเพอร์ตี้ที่ใช้ได้ในสไตล์

สไตล์รองรับพร็อพเพอร์ตี้หลายรายการเหมือนกับที่ตัวแก้ไขรองรับ แต่ไม่ใช่ทุกอย่างที่เป็นตัวแก้ไขจะทำซ้ำได้ด้วยสไตล์ คุณยังคงต้องใช้ ตัวแก้ไขสำหรับลักษณะการทำงานบางอย่าง เช่น การโต้ตอบ การวาดที่กำหนดเอง หรือการซ้อน พร็อพเพอร์ตี้

การจัดกลุ่ม คุณสมบัติ รับช่วงต่อโดยบุตรหลาน
เลย์เอาต์และการปรับขนาด
Padding contentPadding (ด้านใน) และ externalPadding (ด้านนอก) มีให้เลือกในรูปแบบทิศทาง แนวนอน แนวตั้ง และทุกด้าน ไม่
ขนาด fillWidth/Height/Size() และ width, height และ size (รองรับเศษส่วน Dp, DpSize หรือ Float) ไม่
การอธิบายหัวข้อต่างๆ แก่ลูกค้า left/top/right/bottom ออฟเซ็ต ไม่
ลักษณะที่ปรากฏ
เติม background และ foreground (รองรับ Color หรือ Brush) ไม่
เส้นขอบ borderWidth, borderColor และ borderBrush ไม่
รูปทรง shape ไม่ได้ แต่ใช้ร่วมกับพร็อพเพอร์ตี้อื่นๆ clip และ border ใช้รูปร่างที่กำหนดนี้
แสงเงา dropShadow, innerShadow ไม่
การเปลี่ยนรูปแบบ
การเคลื่อนไหวเชิงพื้นที่ของเลเยอร์กราฟิก translationX, translationY, scaleX/Y, rotationX/Y/Z ไม่
ควบคุม alpha, zIndex (ลำดับการซ้อน) และ transformOrigin (จุดหมุน) ไม่
การจัดตัวอักษร
การจัดรูปแบบ textStyle, fontSize, fontWeight, fontStyle และ fontFamily ใช่
การใช้สี contentColor และcontentBrush นอกจากนี้ยังใช้สำหรับการจัดรูปแบบไอคอนด้วย ใช่
ย่อหน้า lineHeight, letterSpacing, textAlign, textDirection, lineBreak และ hyphens ใช่
การตกแต่ง textDecoration, textIndent และ baselineShift ใช่

ใช้รูปแบบกับคอมโพเนนต์โดยตรงด้วยพารามิเตอร์รูปแบบ

คอมโพเนนต์ที่แสดงพารามิเตอร์ Style ช่วยให้คุณกำหนดรูปแบบของคอมโพเนนต์ได้ดังนี้

BaseButton(
    onClick = { },
    style = { }
) {
    BaseText("Click me")
}
StylesSnippets.kt

ภายใน Lambda ของสไตล์ คุณสามารถตั้งค่าพร็อพเพอร์ตี้ต่างๆ เช่น externalPadding หรือ background ได้

BaseButton(
    onClick = { },
    style = { background(Color.Blue) }
) {
    BaseText("Click me")
}
StylesSnippets.kt

ดูรายการพร็อพเพอร์ตี้ที่รองรับทั้งหมดได้ที่พร็อพเพอร์ตี้ที่ใช้ได้ใน สไตล์

ใช้รูปแบบโดยใช้ตัวแก้ไขสำหรับคอมโพเนนต์ที่ไม่มีพารามิเตอร์ที่มีอยู่

สำหรับคอมโพเนนต์ที่ไม่มีพารามิเตอร์รูปแบบในตัว คุณยังคงใช้รูปแบบได้ ด้วยตัวแก้ไข styleable นอกจากนี้ วิธีนี้ยังมีประโยชน์เมื่อพัฒนาคอมโพเนนต์ที่กำหนดเองของคุณเองด้วย

Row(
    modifier = Modifier.styleable { }
) {
    BaseText("Content")
}
StylesSnippets.kt

คุณสามารถใส่พร็อพเพอร์ตี้ เช่น background หรือ padding ภายใน Lambda ได้เช่นเดียวกับพารามิเตอร์ style

Row(
    modifier = Modifier.styleable {
        background(Color.Blue)
    }
) {
    BaseText("Content")
}
StylesSnippets.kt

ตัวแก้ไข Modifier.styleable ที่เชื่อมโยงหลายรายการจะเพิ่มคุณสมบัติที่ไม่ได้รับค่ามา ให้กับคอมโพสเซเบิลที่ใช้ โดยจะทำงานคล้ายกับตัวแก้ไขหลายรายการ ที่กำหนดคุณสมบัติเดียวกัน สำหรับพร็อพเพอร์ตี้ที่รับช่วงมา ระบบจะลบล้างพร็อพเพอร์ตี้เหล่านี้ และตัวแก้ไข styleable ตัวสุดท้ายในเชนจะตั้งค่า

เมื่อใช้ Modifier.styleable คุณอาจต้องสร้างและระบุ StyleState เพื่อใช้กับตัวแก้ไขเพื่อใช้การจัดรูปแบบตามสถานะ ดูรายละเอียดเพิ่มเติมได้ที่สถานะและภาพเคลื่อนไหวที่มี สไตล์

กำหนดรูปแบบแบบสแตนด์อโลน

คุณกำหนดสไตล์แบบสแตนด์อโลนเพื่อนำกลับมาใช้ใหม่ได้โดยทำดังนี้

val style = Style { background(Color.Blue) }
StylesSnippets.kt

จากนั้นคุณจะส่งสไตล์ที่กำหนดนั้นไปยังพารามิเตอร์สไตล์ของ Composable หรือใช้ Modifier.styleableได้ เมื่อใช้ Modifier.styleable คุณต้องสร้างออบเจ็กต์ StyleState ด้วย StyleState มีการอธิบายรายละเอียดไว้ในเอกสารประกอบสถานะและภาพเคลื่อนไหวที่มีสไตล์

ตัวอย่างต่อไปนี้แสดงวิธีใช้สไตล์โดยตรงผ่านพารามิเตอร์ในตัวของคอมโพเนนต์ หรือผ่าน Modifier.styleable

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}

// modifier styleable
val styleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(styleState, style)
) {
    BaseText("Column content")
}
StylesSnippets.kt

นอกจากนี้ คุณยังส่งสไตล์นั้นไปยังคอมโพเนนต์หลายรายการได้ด้วย

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}
BaseText("Different text that uses the same style parameter", style = style)

// modifier styleable
val columnStyleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(columnStyleState, style)
) {
    BaseText("Column")
}
val rowStyleState = remember { MutableStyleState(null) }
Row(
    Modifier.styleable(rowStyleState, style)
) {
    BaseText("Row")
}
StylesSnippets.kt

เพิ่มพร็อพเพอร์ตี้รูปแบบหลายรายการ

คุณเพิ่มพร็อพเพอร์ตี้ Style หลายรายการได้โดยการตั้งค่าพร็อพเพอร์ตี้ที่แตกต่างกันในแต่ละบรรทัด ดังนี้ 

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}
StylesSnippets.kt

พร็อพเพอร์ตี้ในรูปแบบจะไม่เพิ่มขึ้นเหมือนกับการจัดรูปแบบตามตัวแก้ไข สไตล์จะใช้ค่าที่ตั้งล่าสุดในรายการพร็อพเพอร์ตี้ภายในบล็อกสไตล์เดียว ในตัวอย่างต่อไปนี้ เมื่อตั้งค่าพื้นหลัง 2 ครั้ง TealColor จะเป็นพื้นหลังที่ใช้ สำหรับระยะขอบ contentPaddingTop จะลบล้างระยะขอบด้านบน ที่ตั้งค่าโดย contentPadding และจะไม่รวมค่า

BaseButton(
    style = {
        background(Color.Red)
        // Background of Red is now overridden with TealColor instead
        background(TealColor)
        // All directions of padding are set to 64.dp (top, start, end, bottom)
        contentPadding(64.dp)
        // Top padding is now set to 16.dp, all other paddings remain at 64.dp
        contentPaddingTop(16.dp)
    },
    onClick = {
        //
    }
) {
    BaseText("Click me!")
}
StylesSnippets.kt

ปุ่มที่มีการตั้งค่าสีพื้นหลัง 2 สีและการลบล้าง contentPadding 2 รายการ
รูปที่ 1 ปุ่มที่มีการตั้งค่าสีพื้นหลัง 2 สีและcontentPadding การลบล้าง
2 รายการ

ผสานออบเจ็กต์รูปแบบหลายรายการ

คุณสามารถสร้างออบเจ็กต์ Style หลายรายการและส่งไปยังพารามิเตอร์ style ของ Composable ได้

val style1 = Style { background(TealColor) }
val style2 = Style { contentPaddingTop(16.dp) }

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

ปุ่มที่มีสีพื้นหลังและตั้งค่า contentPaddingTop
รูปที่ 2 ปุ่มที่มีสีพื้นหลังและตั้งค่า contentPaddingTop

เมื่อสไตล์หลายรายการระบุพร็อพเพอร์ตี้เดียวกัน ระบบจะเลือกพร็อพเพอร์ตี้ที่ตั้งค่าล่าสุด เนื่องจากพร็อพเพอร์ตี้ไม่ได้เพิ่มในสไตล์ การเว้นวรรคสุดท้าย ที่ส่งผ่านจะลบล้าง contentPaddingHorizontal ที่ตั้งค่าโดยการเว้นวรรคเริ่มต้น contentPadding นอกจากนี้ สีพื้นหลังสุดท้ายจะลบล้าง สีพื้นหลังที่ตั้งค่าโดยรูปแบบเริ่มต้นที่ส่งเข้ามา

val style1 = Style {
    background(Color.Red)
    contentPadding(32.dp)
}

val style2 = Style {
    contentPaddingHorizontal(8.dp)
    background(Color.LightGray)
}

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

ในกรณีนี้ การจัดรูปแบบที่ใช้จะมีพื้นหลังสีเทาอ่อนและระยะห่างจากขอบ 32.dp ยกเว้นระยะห่างจากขอบด้านซ้ายและขวาซึ่งมีค่าเป็น 8.dp

ปุ่มที่มี contentPadding ซึ่งถูกลบล้างโดย Styles ที่แตกต่างกัน
รูปที่ 3 ปุ่มที่มี contentPadding ซึ่งสไตล์อื่นจะลบล้าง

การสืบทอดรูปแบบ

พร็อพเพอร์ตี้รูปแบบบางอย่าง เช่น contentColor และพร็อพเพอร์ตี้ที่เกี่ยวข้องกับรูปแบบข้อความ จะส่งต่อไปยัง Composable ลูก สไตล์ที่ตั้งค่าใน Composable ขององค์ประกอบย่อยจะลบล้างสไตล์ขององค์ประกอบหลักที่รับช่วงมาสำหรับองค์ประกอบย่อยนั้นๆ

การส่งต่อสไตล์ด้วยพารามิเตอร์ Style, styleable และ direct
รูปที่ 4 การส่งต่อสไตล์ด้วย Style, styleable และพารามิเตอร์โดยตรง
ลำดับความสำคัญ วิธีการ เอฟเฟ็กต์
1 (สูงสุด) อาร์กิวเมนต์โดยตรงใน Composable ลบล้างทุกอย่าง เช่น Text(color = Color.Red)
2 พารามิเตอร์รูปแบบ การลบล้างรูปแบบในเครื่อง Text(style = Style { contentColor(Color.Red)}
3 เชนตัวปรับแต่ง Modifier.styleable{ contentColor(Color.Red) ในคอมโพเนนต์เอง
4 (ต่ำสุด) สไตล์หลัก สำหรับพร็อพเพอร์ตี้ที่รับช่วงได้ (การจัดรูปแบบข้อความ/สี) ที่ส่งต่อมาจากระดับบน

การจัดรูปแบบระดับบน

คุณตั้งค่าพร็อพเพอร์ตี้ข้อความ (เช่น contentColor) จาก Composable ระดับบนสุดได้ และค่าดังกล่าวจะส่งต่อไปยัง Composable Text ย่อยทั้งหมด

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children inherit", style = { width(60.dp) })
    BaseText("certain properties")
    BaseText("from their parents")
}
StylesSnippets.kt

การรับช่วงพร็อพเพอร์ตี้ของ Composable ย่อย
รูปที่ 5 การรับช่วงพร็อพเพอร์ตี้ของ Composable ย่อย

การลบล้างพร็อพเพอร์ตี้ของพร็อพเพอร์ตี้ย่อย

นอกจากนี้ คุณยังตั้งค่าสไตล์ใน Text ที่ใช้ร่วมกันได้ที่เฉพาะเจาะจงได้ด้วย หาก Composable ระดับบนสุด มีการตั้งค่าสไตล์ไว้ สไตล์ที่ตั้งค่าใน Composable ย่อยจะลบล้าง สไตล์ของ Composable ระดับบนสุด

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children can ", style = {
        contentBrush(Brush.linearGradient(listOf(Color.Red, Color.Blue)))
    })
    BaseText("override properties")
    BaseText("set by their parents")
}
StylesSnippets.kt

Composable ย่อยจะลบล้างพร็อพเพอร์ตี้ของ Composable หลัก
รูปที่ 6 โดย Composable ย่อยจะลบล้างพร็อพเพอร์ตี้ของ Composable หลัก

ใช้พร็อพเพอร์ตี้สไตล์ที่กำหนดเอง

คุณสร้างพร็อพเพอร์ตี้ที่กำหนดเองซึ่งแมปกับคำจำกัดความของสไตล์ที่มีอยู่ได้โดยใช้ ฟังก์ชันส่วนขยายใน StyleScope ดังตัวอย่างต่อไปนี้

fun StyleScope.outlinedBackground(color: Color) {
    border(1.dp, color)
    background(color)
}
StylesSnippets.kt

ใช้พร็อพเพอร์ตี้ใหม่นี้ภายในคำจำกัดความของสไตล์

val customExtensionStyle = Style {
    outlinedBackground(Color.Blue)
}
StylesSnippets.kt

ระบบไม่รองรับการสร้างพร็อพเพอร์ตี้ใหม่ที่จัดรูปแบบได้ หากกรณีการใช้งานของคุณ ต้องมีการสนับสนุนดังกล่าว โปรดส่งคำขอฟีเจอร์

อ่านค่า CompositionLocal

รูปแบบทั่วไปคือการจัดเก็บโทเค็นระบบการออกแบบภายใน CompositionLocal, เพื่อเข้าถึงตัวแปรโดยไม่ต้องส่งเป็นพารามิเตอร์ สไตล์ เข้าถึง CompositionLocal เพื่อดึงค่าทั่วทั้งระบบภายในสไตล์ได้

val buttonStyle = Style {
    contentPadding(12.dp)
    shape(RoundedCornerShape(50))
    background(Brush.verticalGradient(LocalCustomColors.currentValue.background))
}
StylesSnippets.kt