ตัวปรับแต่งการเขียน

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

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

ตัวปรับแต่งคือวัตถุ Kotlin มาตรฐาน สร้างตัวแก้ไขโดยการเรียกใช้ฟังก์ชันคลาส Modifier รายการใดรายการหนึ่งต่อไปนี้

@Composable
private fun Greeting(name: String) {
    Column(modifier = Modifier.padding(24.dp)) {
        Text(text = "Hello,")
        Text(text = name)
    }
}
ModifierSnippets.kt

คุณเชื่อมโยงฟังก์ชันเหล่านี้เข้าด้วยกันเพื่อเขียนฟังก์ชันได้

@Composable
private fun Greeting(name: String) {
    Column(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxWidth()
    ) {
        Text(text = "Hello,")
        Text(text = name)
    }
}
ModifierSnippets.kt

ในโค้ดข้างต้น คุณสังเกตเห็นฟังก์ชันของตัวปรับแต่งต่างๆ ที่ใช้งานร่วมกัน

• padding เว้นวรรครอบๆ องค์ประกอบ
• fillMaxWidth ทําให้คอมโพสิเบิลเติมความกว้างสูงสุดที่ได้รับจากคอมโพสิเบิลหลัก

แนวทางปฏิบัติแนะนำคือให้ Composable ทั้งหมดยอมรับ modifier แล้วส่งตัวแก้ไขนั้นไปยังหน่วยย่อยรายแรกที่แสดง UI ซึ่งทำให้โค้ดของคุณนํากลับมาใช้ซ้ำได้มากขึ้น รวมถึงทําให้ลักษณะการทํางานของโค้ดคาดการณ์ได้และใช้งานง่ายขึ้น ดูข้อมูลเพิ่มเติมได้ที่หลักเกณฑ์ของ Compose API หัวข้อองค์ประกอบยอมรับและปฏิบัติตามพารามิเตอร์ตัวแก้ไข

ลำดับของคีย์ตัวปรับแต่งมีความสำคัญ

ลําดับของฟังก์ชันตัวปรับแต่งมีนัยสำคัญ เนื่องจากแต่ละฟังก์ชันทําการเปลี่ยนแปลงModifierที่แสดงผลโดยฟังก์ชันก่อนหน้า ลําดับจึงส่งผลต่อผลลัพธ์สุดท้าย ลองดูตัวอย่างต่อไปนี้

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}
ModifierSnippets.kt

ในโค้ดเหนือพื้นที่ทั้งหมดสามารถคลิกได้ ซึ่งรวมถึงรอบๆ ระยะห่างจากขอบ เนื่องจากตัวแก้ไข padding มีการใช้หลังจาก clickable แป้นกดร่วม หากลำดับตัวแก้ไขกลับกัน เว้นวรรคที่เพิ่มโดย padding จะไม่ตอบสนองต่ออินพุตของผู้ใช้

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}
ModifierSnippets.kt

หมายเหตุ: ลำดับที่ชัดเจนจะช่วยให้คุณให้เหตุผลว่าตัวแก้ไขต่างๆ จะ โต้ตอบ เปรียบเทียบกับระบบที่อิงตามมุมมองซึ่งคุณต้องเรียนรู้รูปแบบกล่อง โดยระบบจะใช้ระยะขอบ "นอก" องค์ประกอบ แต่จะใช้การกรอก "ใน" องค์ประกอบนั้น และระบบจะปรับขนาดองค์ประกอบพื้นหลังตามความเหมาะสม การออกแบบตัวแก้ไขทำให้ลักษณะการทำงานประเภทนี้ชัดเจนและคาดการณ์ได้ รวมถึงช่วยให้คุณควบคุมได้มากขึ้นเพื่อให้ได้ลักษณะการทำงานที่ต้องการ และยังอธิบายสาเหตุที่ไม่มีตัวแก้ไขระยะขอบด้วย แต่มีเพียง padding รูปเท่านั้น

ตัวแก้ไขในตัว

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

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

padding และ size

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

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(/*...*/)
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

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

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            /*...*/
            modifier = Modifier.requiredSize(150.dp)
        )
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

ในตัวอย่างนี้ แม้ว่าตั้งค่า height ระดับบนสุดเป็น 100.dp ความสูงของ Image จะเป็น 150.dp เนื่องจากใช้ตัวแก้ไข requiredSize ลำดับความสำคัญ

หมายเหตุ: เลย์เอาต์จะขึ้นอยู่กับข้อจำกัด และโดยปกติแล้ว เลย์เอาต์หลักจะส่ง สำหรับเด็กไม่ได้ ผู้เผยแพร่โฆษณาย่อยควรเคารพข้อจำกัดดังกล่าว แต่ UI อาจไม่ต้องการการดำเนินการดังกล่าวเสมอไป แต่มีวิธีที่จะหลีกเลี่ยงลักษณะการทำงานนี้ของบุตรหลานได้ ตัวอย่างเช่น คุณสามารถส่งผ่านแป้นกดร่วม เช่น requiredSize ไปยังผู้เผยแพร่โฆษณาย่อยโดยตรง ซึ่งจะเป็นการลบล้างข้อจำกัดที่ได้รับโดย รายการย่อยจากระดับบน หรือคุณสามารถใช้เค้าโครงที่กำหนดเองกับ พฤติกรรมของคุณ เมื่อองค์ประกอบย่อยไม่เป็นไปตามข้อจำกัด ระบบเลย์เอาต์จะซ่อนองค์ประกอบย่อยนี้จากองค์ประกอบหลัก ผู้ปกครองจะเห็นค่า width และ heightของบุตรหลานราวกับว่าถูกบังคับให้อยู่ภายใต้ข้อจำกัดที่ผู้ปกครองระบุ ระบบเค้าโครงจะจัดกึ่งกลางย่อยภายในพื้นที่ที่จัดสรรโดย ระดับบนสุดภายใต้สมมติฐานว่าเด็กเคารพข้อจำกัด นักพัฒนาซอฟต์แวร์สามารถลบล้างลักษณะการทำงานของการจัดกึ่งกลางได้โดยใช้ wrapContentSize ตัวแก้ไขเป็นรายการย่อย

ถ้าคุณต้องการให้เค้าโครงย่อยเติมเต็มความสูงที่ใช้ได้ทั้งหมดซึ่ง ระดับบน ให้เพิ่มแป้นกดร่วม fillMaxHeight (Compose จะมี fillMaxSize และ fillMaxWidth):

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            /*...*/
            modifier = Modifier.fillMaxHeight()
        )
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

หากต้องการเพิ่มระยะห่างจากขอบรอบๆ องค์ประกอบ ให้ตั้งค่าตัวแก้ไข padding

ถ้าต้องการเพิ่มระยะห่างจากขอบเหนือข้อความพื้นฐาน ระยะห่างที่เจาะจงจากด้านบนของเลย์เอาต์ไปยังเกณฑ์พื้นฐาน ตัวปรับแต่ง paddingFromBaseline:

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(
                text = artist.name,
                modifier = Modifier.paddingFromBaseline(top = 50.dp)
            )
            Text(artist.lastSeenOnline)
        }
    }
}
ModifierSnippets.kt

ออฟเซ็ต

หากต้องการจัดตําแหน่งเลย์เอาต์ตามตําแหน่งเดิม ให้เพิ่มตัวแก้ไข offset และตั้งค่าการเลื่อนในแกน x และ y ออฟเซตอาจเป็นค่าบวกหรือไม่ใช่ค่าบวกก็ได้ ความแตกต่างระหว่าง padding และ offset คือการเพิ่ม offset ลงใน Composable ไม่ใช่ เปลี่ยนการวัดค่า:

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(artist.name)
            Text(
                text = artist.lastSeenOnline,
                modifier = Modifier.offset(x = 4.dp)
            )
        }
    }
}
ModifierSnippets.kt

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

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

ความปลอดภัยของขอบเขตใน Compose

ใน Compose มีตัวแก้ไขที่ใช้ได้เฉพาะเมื่อมีผลกับรายการย่อยเท่านั้น Composable บางรายการ Compose จะบังคับใช้ขอบเขตนี้โดยใช้ขอบเขตที่กำหนดเอง

เช่น หากต้องการกำหนดให้บุตรหลานใหญ่เท่ากับบัญชีหลักBoxโดยไม่มี ส่งผลต่อขนาด Box ให้ใช้ matchParentSize แป้นกดร่วม matchParentSize พร้อมให้ใช้งานเฉพาะใน BoxScope ดังนั้นจึงใช้ได้กับรายการย่อยภายในรายการหลัก Box เท่านั้น

ความปลอดภัยของขอบเขตช่วยให้คุณเพิ่มตัวแก้ไขที่จะใช้งานไม่ได้ใน Composable และขอบเขต ซึ่งช่วยประหยัดเวลาจากการลองผิดลองถูก

หมายเหตุ: ระบบ Android View ไม่มีความปลอดภัยของขอบเขต นักพัฒนาซอฟต์แวร์ มักลองใช้พารามิเตอร์เลย์เอาต์ต่างๆ เพื่อดูว่า หัวข้อใดเนื้อหาหนึ่งถือเป็นแนวคิดและความหมายในบริบทของผู้ปกครองคนใดคนหนึ่ง

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

matchParentSizeในBox

ดังที่กล่าวไว้ข้างต้น หากต้องการให้เลย์เอาต์ย่อยมีขนาดเท่ากับเลย์เอาต์หลัก Box โดยไม่ส่งผลต่อขนาด Box ให้ใช้ตัวแก้ไข matchParentSize

โปรดทราบว่า matchParentSize ใช้ได้เฉพาะภายในขอบเขต Box ซึ่งหมายความว่าจะใช้ได้กับคอมโพสิเบิล Box ย่อยโดยตรงเท่านั้น

ในตัวอย่างด้านล่าง ย่อย Spacer นำขนาดมาจาก Box ระดับบน ซึ่งนำขนาดมาจากเด็กๆ ที่โตที่สุด ในกรณีนี้คือ ArtistCard

@Composable
fun MatchParentSizeComposable() {
    Box {
        Spacer(
            Modifier
                .matchParentSize()
                .background(Color.LightGray)
        )
        ArtistCard()
    }
}
ModifierSnippets.kt

หากใช้ fillMaxSize แทน matchParentSize Spacer จะใช้พื้นที่ว่างทั้งหมดที่อนุญาตสำหรับรายการหลัก ซึ่งจะทำให้รายการหลักขยายและเติมเต็มพื้นที่ว่างทั้งหมด

weight ใน Row และ Column

ดังที่ได้กล่าวไว้ในส่วนระยะห่างจากขอบและขนาดก่อนหน้านี้ โดยค่าเริ่มต้น ขนาดของคอมโพสิเบิลจะกำหนดโดยเนื้อหาที่ตัดขึ้นบรรทัดใหม่ คุณสามารถตั้งค่าขนาด Composable ให้ยืดหยุ่นภายใน ผู้ปกครองที่ใช้ตัวปรับแต่ง weight ที่มีเฉพาะใน RowScope และ ColumnScope

ลองพิจารณา Row ที่มี Composable Box 2 รายการ กล่องแรกมี weight เป็น 2 เท่าของกล่องที่ 2 จึงมี 2 เท่าของความกว้าง เนื่องจาก Row กว้าง 210.dp Box แรกจึงกว้าง 140.dp และBox ที่ 2 กว้าง 70.dp

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            /*...*/
            modifier = Modifier.weight(2f)
        )
        Column(
            modifier = Modifier.weight(1f)
        ) {
            /*...*/
        }
    }
}
ModifierSnippets.kt

การคลายไฟล์และนำตัวแก้ไขมาใช้ซ้ำ

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

Modifier.Element แต่ละรายการจะแสดงลักษณะการทำงานแต่ละรายการ เช่น เลย์เอาต์ ภาพวาด และพฤติกรรมของกราฟิก พฤติกรรมที่เกี่ยวข้องกับท่าทางสัมผัส การโฟกัส และความหมาย รวมถึงเหตุการณ์อินพุตของอุปกรณ์ การจัดลำดับความสำคัญขององค์ประกอบเหล่านี้: องค์ประกอบที่มีตัวแก้ไขที่ และจะถูกนำไปใช้ก่อน

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

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

แนวทางปฏิบัติแนะนำในการใช้ตัวแก้ไขซ้ำ

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

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)
ModifierSnippets.kt

ดึงข้อมูลและนําตัวแก้ไขมาใช้ซ้ำเมื่อสังเกตสถานะที่เปลี่ยนแปลงบ่อย

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

@Composable
fun LoadingWheelAnimation() {
    val animatedState = animateFloatAsState(/*...*/)

    LoadingWheel(
        // Creation and allocation of this modifier will happen on every frame of the animation!
        modifier = Modifier
            .padding(12.dp)
            .background(Color.Gray),
        animatedState = animatedState
    )
}
ModifierSnippets.kt

แต่คุณสามารถสร้าง ดึงข้อมูล และนําอินสแตนซ์เดิมของมอดิวเลเตอร์มาใช้ซ้ำได้ และส่งไปยังคอมโพสิเบิลดังนี้

// Now, the allocation of the modifier happens here:
val reusableModifier = Modifier
    .padding(12.dp)
    .background(Color.Gray)

@Composable
fun LoadingWheelAnimation() {
    val animatedState = animateFloatAsState(/*...*/)

    LoadingWheel(
        // No allocation, as we're just reusing the same instance
        modifier = reusableModifier,
        animatedState = animatedState
    )
}
ModifierSnippets.kt

การคํานวณและนําตัวแก้ไขที่ไม่มีขอบเขตมาใช้ซ้ำ

คุณยกเลิกการกำหนดขอบเขตหรือกำหนดขอบเขตให้กับคอมโพสิเบิลที่เฉพาะเจาะจงได้ ในกรณีของตัวแก้ไขที่ไม่กำหนดขอบเขต คุณสามารถแยกแป้นเหล่านั้นออกได้ง่ายๆ ภายนอก Composable ใดๆ เป็นตัวแปรพื้นฐาน:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)

@Composable
fun AuthorField() {
    HeaderText(
        // ...
        modifier = reusableModifier
    )
    SubtitleText(
        // ...
        modifier = reusableModifier
    )
}
ModifierSnippets.kt

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

val reusableItemModifier = Modifier
    .padding(bottom = 12.dp)
    .size(216.dp)
    .clip(CircleShape)

@Composable
private fun AuthorList(authors: List<Author>) {
    LazyColumn {
        items(authors) {
            AsyncImage(
                // ...
                modifier = reusableItemModifier,
            )
        }
    }
}
ModifierSnippets.kt

การสกัดและนําตัวแก้ไขที่มีขอบเขตมาใช้ซ้ำ

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

Column(/*...*/) {
    val reusableItemModifier = Modifier
        .padding(bottom = 12.dp)
        // Align Modifier.Element requires a ColumnScope
        .align(Alignment.CenterHorizontally)
        .weight(1f)
    Text1(
        modifier = reusableItemModifier,
        // ...
    )
    Text2(
        modifier = reusableItemModifier
        // ...
    )
    // ...
}
ModifierSnippets.kt

คุณควรส่งเฉพาะตัวแก้ไขที่กำหนดขอบเขตที่ดึงข้อมูลมาไปยัง ในขอบเขตเดียวกันและมุ่งเน้นโดยตรง โปรดดูส่วนความปลอดภัยด้านขอบเขตใน เขียนเพื่อใช้อ้างอิงเพิ่มเติมว่าสำคัญอย่างไร

Column(modifier = Modifier.fillMaxWidth()) {
    // Weight modifier is scoped to the Column composable
    val reusableItemModifier = Modifier.weight(1f)

    // Weight will be properly assigned here since this Text is a direct child of Column
    Text1(
        modifier = reusableItemModifier
        // ...
    )

    Box {
        Text2(
            // Weight won't do anything here since the Text composable is not a direct child of Column
            modifier = reusableItemModifier
            // ...
        )
    }
}
ModifierSnippets.kt

การผูกมัดมากขึ้นของตัวแก้ไขที่แยกออกมา

คุณสามารถต่อหรือต่อท้ายเชนตัวแก้ไขที่ดึงมาได้โดยเรียกใช้ฟังก์ชัน .then() ดังนี้

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)

// Append to your reusableModifier
reusableModifier.clickable { /*...*/ }

// Append your reusableModifier
otherModifier.then(reusableModifier)
ModifierSnippets.kt

แต่อย่าลืมว่าลำดับของตัวแก้ไขมีความสำคัญ

ดูข้อมูลเพิ่มเติม

เรามีรายการตัวแก้ไขทั้งหมดพร้อมพารามิเตอร์และขอบเขต

หากต้องการฝึกฝนเพิ่มเติมเกี่ยวกับวิธีใช้ตัวแก้ไข คุณยังดูเลย์เอาต์พื้นฐานใน Codelab ของ Compose หรือดูตอนนี้ในที่เก็บข้อมูล Android ได้ด้วย

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