Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

พร็อพเพอร์ตี้ที่ใช้ได้ในรูปแบบ

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

การจัดกลุ่ม	พร็อพเพอร์ตี้	พร็อพเพอร์ตี้ย่อยรับช่วง
เลย์เอาต์และการปรับขนาด
ระยะห่างจากขอบเนื้อหา (ด้านใน)	- `contentPadding(all: Dp)` - `contentPadding(horizontal: Dp, vertical: Dp)` - `contentPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)` - `contentPaddingHorizontal(value: Dp)` / `contentPaddingVertical(value: Dp)` - `contentPaddingStart(value: Dp)` / `contentPaddingTop(value: Dp)` / `contentPaddingEnd(value: Dp)` / `contentPaddingBottom(value: Dp)`	ไม่
ระยะห่างจากขอบภายนอก (ด้านนอก)	- `externalPadding(all: Dp)` - `externalPadding(horizontal: Dp, vertical: Dp)` - `externalPadding(start: Dp, top: Dp, end: Dp, bottom: Dp)` - `externalPaddingHorizontal(value: Dp)` / `externalPaddingVertical(value: Dp)` - `externalPaddingStart(value: Dp)` / `externalPaddingTop(value: Dp)` / `externalPaddingEnd(value: Dp)` / `externalPaddingBottom(value: Dp)`	ไม่
ขนาด	`fillWidth()/fillHeight()/fillSize()` และ `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/scaleY`, `rotationX/rotationY/rotationZ`	ไม่
ควบคุม	`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")
}StylesS
nippets.kt

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

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

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

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

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

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

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

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

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

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

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

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

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

จากนั้นคุณจะส่งรูปแบบที่กำหนดไว้ไปยังพารามิเตอร์รูปแบบของคอมโพเนนต์ที่ใช้ร่วมกันได้หรือด้วย 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)
) {
    Base
Text("Row")
}StylesSnippets.kt

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

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

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}StylesS
nippets.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!")
}StylesS
nippets.kt

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

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

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

BaseButton(
    style = style1 then style2,
    onClick = {

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

เมื่อรูปแบบหลายรายการระบุพร็อพเพอร์ตี้เดียวกัน ระบบจะเลือกพร็อพเพอร์ตี้ที่ตั้งค่าล่าสุด เนื่องจากพร็อพเพอร์ตี้ในรูปแบบจะไม่เพิ่มค่า ระยะห่างจากขอบที่ส่งเข้ามาล่าสุดจะลบล้าง 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!")
}StylesS
nippets.kt

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

การรับช่วงรูปแบบ

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

การส่งต่อสไตล์ด้วยพารามิเตอร์ Style, styleable และ direct — **รูปที่ 4** การเผยแพร่รูปแบบด้วย `Style`, `styleable` และพารามิเตอร์โดยตรง

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

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

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

คุณตั้งค่าพร็อพเพอร์ตี้ข้อความ (เช่น contentColor) จากคอมโพเนนต์ที่ใช้ร่วมกันได้ระดับบนสุด และพร็อพเพอร์ตี้เหล่านั้นจะเผยแพร่ไปยังคอมโพเนนต์ที่ใช้ร่วมกันได้ 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(&quot;from their par
ents")
}StylesSnippets.kt

การรับช่วงพร็อพเพอร์ตี้ของ Composable ย่อย — **รูปที่ 5** การรับช่วงพร็อพเพอร์ตี้ของคอมโพเนนต์ที่ใช้ร่วมกันได้ย่อย

การลบล้างพร็อพเพอร์ตี้ของคอมโพเนนต์ที่ใช้ร่วมกันได้ย่อย

นอกจากนี้ คุณยังตั้งค่าการจัดรูปแบบในคอมโพเนนต์ที่ใช้ร่วมกันได้ 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 can ", style = {
        contentBrush(Brush.linearGradient(listOf(Color.Red, Color.Blue)))
    })
    BaseText("override properties")
    BaseText(";set by their par
ents")
}StylesSnippets.kt

Composable ย่อยจะลบล้างพร็อพเพอร์ตี้ของ Composable หลัก — **รูปที่ 6** คอมโพเนนต์ที่ใช้ร่วมกันได้ย่อยจะลบล้างพร็อพเพอร์ตี้ระดับบนสุด

ใช้พร็อพเพอร์ตี้รูปแบบที่กำหนดเอง

คุณสร้างพร็อพเพอร์ตี้ที่กำหนดเองซึ่งแมปกับคำจำกัดความรูปแบบที่มีอยู่ได้โดยใช้ฟังก์ชันส่วนขยายใน 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

ภาพรวม

สถานะและภาพเคลื่อนไหวในสไตล์