ระบบ Modifier
กำหนดขนาด ระยะห่าง และรูปแบบด้วย modifier
ระบบ Modifier เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
Modifier คืออะไร
Modifier ใช้ตกแต่งหรือกำหนดค่าของ composable เช่น ขนาด ระยะห่างภายใน พื้นหลัง พฤติกรรมเมื่อแตะ และอื่น ๆ composable เกือบทุกแบบรับพารามิเตอร์ modifier
การต่อเป็นสาย
Modifier สามารถต่อเป็นสายได้: แต่ละฟังก์ชันจะส่งคืน modifier ตัวใหม่ จึงเรียกใช้ต่อกันได้
Modifier
.padding(16.dp)
.size(100.dp)
.background(Color.LightGray)การส่ง Modifier
คุณส่งสาย modifier ให้กับพารามิเตอร์ modifier ของ composable
Text(
text = "Hello",
modifier = Modifier
.padding(8.dp)
.background(Color.Yellow)
)ลำดับมีผล
ลำดับของ modifier ทำให้ผลลัพธ์แตกต่างกัน Modifier จะถูกนำไปใช้จากซ้ายไปขวา โดยห่อหุ้มกันเหมือนเป็นชั้น ๆ
padding แล้วจึง background
ในกรณีนี้จะใช้ padding ก่อน ดังนั้นพื้นหลังจึงเติมเต็มเฉพาะพื้นที่ด้านใน เหลือพื้นที่ของ padding เป็นแบบโปร่งใส
Modifier
.padding(16.dp)
.background(Color.Red)background แล้วจึง padding
เมื่อสลับลำดับ พื้นหลังจะครอบคลุมพื้นที่ทั้งหมด และ padding จะดันเนื้อหาเข้าด้านใน ใช้ modifier เดิม แต่หน้าตาแตกต่างกัน เพราะลำดับมีผล
Modifier
.background(Color.Red)
.padding(16.dp)Modifier สำหรับกำหนดขนาดที่ใช้บ่อย
Modifier สำหรับกำหนดขนาดที่ใช้บ่อย:
size(100.dp)— กำหนดความกว้างและความสูงตายตัวfillMaxWidth()— ใช้พื้นที่แนวนอนทั้งหมดfillMaxSize()— ใช้พื้นที่ว่างทั้งหมดwidth()/height()— กำหนดมิติใดมิติหนึ่ง
คลิกได้
Modifier.clickable ทำให้ composable ใด ๆ ตอบสนองต่อการแตะได้ แม้จะเป็นเพียง Text หรือ Box ธรรมดา
Text(
text = "Tap me",
modifier = Modifier.clickable { /* handle */ }
)การนำพารามิเตอร์ Modifier กลับมาใช้
ตามธรรมเนียม composable แบบกำหนดเองจะรับพารามิเตอร์ modifier: Modifier = Modifier และส่งต่อให้กับองค์ประกอบราก วิธีนี้ทำให้ผู้เรียกปรับแต่งการจัดวางจากภายนอกได้
@Composable
fun Card(modifier: Modifier = Modifier) {
Column(modifier = modifier) { /* ... */ }
}Modifier เป็นพารามิเตอร์แรก
ตามธรรมเนียม พารามิเตอร์ modifier จะอยู่ก่อนพารามิเตอร์เสริมอื่น ๆ และมีค่าเริ่มต้นเป็น Modifier ว่าง วิธีนี้ทำให้ API ของคุณสอดคล้องกับไลบรารีมาตรฐาน
นำทุกอย่างมารวมกัน
กล่องที่ตกแต่งรูปแบบแล้ว โดยใช้สาย modifier ที่ตั้งใจจัดลำดับไว้
Box(
modifier = Modifier
.size(120.dp)
.background(Color(0xFFE86F00))
.padding(12.dp)
) {
Text(text = "Compose", color = Color.White)
}ตรวจสอบความเข้าใจอย่างรวดเร็ว
เหตุใด Modifier.padding(16.dp).background(Color.Red) จึงมีหน้าตาแตกต่างจาก Modifier.background(Color.Red).padding(16.dp)
สรุปทบทวน
Modifier:
- กำหนดขนาด ระยะห่างภายใน พื้นหลัง การคลิก และอื่น ๆ
- สามารถต่อเป็นสายและนำไปใช้ตามลำดับ — ลำดับมีผล
- composable แบบกำหนดเองควรเปิดให้ใช้พารามิเตอร์
modifier: Modifier = Modifierเป็นพารามิเตอร์แรก
คำถามที่พบบ่อย
บทเรียน “ระบบ Modifier” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ระบบ Modifier” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ระบบ Modifier”
กำหนดขนาด ระยะห่าง และรูปแบบด้วย modifier คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ระบบ Modifier” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม
ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ