Jetpack Compose Academy · บทเรียน

เขียน Layout Composable

วัดองค์ประกอบลูกและกำหนดตำแหน่งด้วยตนเอง

บทเรียน 2 จาก 413 ขั้นตอน

เขียน Layout Composable เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทำความรู้จักองค์ประกอบ Composable สำหรับเลย์เอาต์

หากต้องการสร้างการจัดเรียงของคุณเอง ให้ใช้ Composable เลย์เอาต์ ซึ่งมอบพลังการวัดและจัดวางโดยตรงให้คุณ 🛠️

เลย์เอาต์รับเนื้อหาและแลมบ์ดา

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

Layout(content = content,
  modifier = modifier) { measurables, constraints ->
  // measure and place
}

ขั้นตอนที่หนึ่ง: วัดองค์ประกอบลูก

ภายในแลมบ์ดา ให้ประมวลผลสิ่งที่วัดได้และวัดแต่ละรายการ คุณจะได้รับรายการ สิ่งที่จัดวางได้ ซึ่งทราบขนาดแล้วกลับมา

val placeables = measurables.map { it.measure(constraints) }

ขั้นตอนที่สอง: กำหนดขนาดของตัวเอง

ตอนนี้ให้คำนวณว่าเลย์เอาต์ของคุณควรมีขนาดเท่าใด สำหรับการซ้อนแนวตั้ง ความสูงคือ ผลรวม ของความสูงองค์ประกอบลูก และความกว้างคือความกว้างขององค์ประกอบลูกที่กว้างที่สุด

val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }

ขั้นตอนที่สาม: รายงานขนาดด้วยเลย์เอาต์()

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

layout(width, height) {
  // placement goes here
}

ขั้นตอนที่สี่: จัดวางองค์ประกอบลูกแต่ละรายการ

ติดตามค่าออฟเซ็ต y ที่เพิ่มขึ้นเรื่อย ๆ และจัดวางสิ่งที่จัดวางได้แต่ละรายการไว้ใต้รายการก่อนหน้า หลังเรียกใช้ placeRelative แต่ละครั้ง ให้เพิ่มความสูงของรายการนั้นลงในออฟเซ็ต

var y = 0
placeables.forEach {
  it.placeRelative(0, y)
  y += it.height
}

คุณสร้าง Column ขึ้นมาใหม่แล้ว

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

ห่อหุ้มไว้ในฟังก์ชันที่นำกลับมาใช้ซ้ำได้

ใส่การเรียกใช้เลย์เอาต์ไว้ในฟังก์ชัน @Composable เพื่อให้ผู้อื่นใช้งานได้เหมือนองค์ประกอบในตัว เปิดให้ส่งตัวปรับแต่งและช่องเนื้อหาได้

@Composable
fun MyColumn(modifier: Modifier = Modifier,
  content: @Composable () -> Unit) { }

ส่งต่อ Modifier

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

กำหนดค่าเริ่มต้นให้พารามิเตอร์ Modifier

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

ตอนนี้คุณปรับแต่งได้ทุกอย่าง

เปลี่ยนการคำนวณตำแหน่ง แล้วคุณจะได้การซ้อนแบบทแยง แถวที่จัดกึ่งกลาง หรือตาราง Composable เลย์เอาต์ คือพื้นที่ว่างสำหรับออกแบบการจัดเรียงของคุณ

ตรวจสอบสั้น ๆ

เมธอดใดเป็นผู้จัดตำแหน่งองค์ประกอบลูกที่วัดแล้วบนหน้าจอ

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: การเขียน Composable สำหรับเลย์เอาต์

ภายในเลย์เอาต์ คุณ วัดขนาด องค์ประกอบลูกเพื่อให้ได้สิ่งที่จัดวางได้ เรียกใช้เลย์เอาต์() เพื่อกำหนดขนาด แล้วเรียกใช้ placeRelative กับองค์ประกอบลูกแต่ละรายการ ห่อหุ้มทั้งหมดไว้ในฟังก์ชันเพื่อใช้ซ้ำ ✅

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “เขียน Layout Composable” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เขียน Layout Composable” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เขียน Layout Composable”

วัดองค์ประกอบลูกและกำหนดตำแหน่งด้วยตนเอง คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “เขียน Layout Composable” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Jetpack Compose Academy