Column, Row และ Box
จัดเรียง composable ในเค้าโครงทั่วไป
Column, Row และ Box เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
การจัดวาง Composable
เมื่อต้องการวาง composable ให้สัมพันธ์กัน Compose มี composable สำหรับการจัดวางหลัก 3 แบบ ได้แก่ Column, Row และ Box
Column: ซ้อนในแนวตั้ง
Column จะซ้อนองค์ประกอบลูกในแนวตั้งจากบนลงล่าง
Column {
Text("First")
Text("Second")
Text("Third")
}Row: ซ้อนในแนวนอน
Row จะวางองค์ประกอบลูกเคียงข้างกันจากซ้ายไปขวา
Row {
Text("Left")
Text("Middle")
Text("Right")
}Box: วางซ้อนกัน
Box จะวางองค์ประกอบลูกซ้อนทับกันเหมือนเป็นชั้น ๆ องค์ประกอบที่อยู่ภายหลังจะวาดทับองค์ประกอบก่อนหน้า เหมาะสำหรับป้ายกำกับ การวางซ้อน และพื้นหลัง
Box {
Image(
painter = painterResource(R.drawable.photo),
contentDescription = null
)
Text("Caption")
}องค์ประกอบลูกคือ Lambda ของเนื้อหา
การจัดวางแต่ละแบบรับ lambda ของเนื้อหา ต่อท้าย composable ที่คุณเรียกใช้ภายในจะกลายเป็นองค์ประกอบลูกของการจัดวางนั้น ไม่มี XML องค์ประกอบลูกเป็นเพียงการเรียกฟังก์ชัน
การซ้อนการจัดวาง
คุณสามารถซ้อนการจัดวางได้อย่างอิสระ วาง Row ไว้ภายใน Column เพื่อสร้างโครงสร้างคล้ายตารางหรือรายการแถว
Column {
Row {
Text("A")
Text("B")
}
Row {
Text("C")
Text("D")
}
}Column เทียบกับ LinearLayout
หากคุณเคยใช้ XML, Column จะคล้ายกับ LinearLayout แนวตั้ง ส่วน Row จะคล้ายกับแบบแนวนอน และ Box จะคล้ายกับ FrameLayout แบบเรียบง่าย
ขนาดเริ่มต้น
โดยค่าเริ่มต้น การจัดวางจะมีขนาดเท่าที่องค์ประกอบลูกต้องการเท่านั้น (ห่อหุ้มเนื้อหา) คุณสามารถทำให้เต็มพื้นที่ที่มีได้ด้วยตัวปรับแต่ง เช่น Modifier.fillMaxSize() ซึ่งจะอธิบายในบทเรียนถัดไป
contentAlignment ใน Box
Box สามารถจัดแนวองค์ประกอบลูกทั้งหมดด้วย contentAlignment เช่น จัดทุกอย่างให้อยู่ตรงกลาง
Box(contentAlignment = Alignment.Center) {
Text("Centered")
}เลือกแบบที่เหมาะสม
เลือกตามทิศทาง: Column สำหรับแนวตั้ง, Row สำหรับแนวนอน และ Box สำหรับการวางซ้อนหรือการจัดองค์ประกอบลูกเดียวให้อยู่กึ่งกลาง หน้าจอส่วนใหญ่มักใช้ทั้งสามแบบร่วมกัน
นำทุกอย่างมารวมกัน
การจัดวางโปรไฟล์ขนาดเล็กที่ใช้ทั้งสามแบบ
@Composable
fun Profile() {
Column {
Box(contentAlignment = Alignment.Center) {
Image(
painter = painterResource(R.drawable.avatar),
contentDescription = null
)
}
Row {
Text("Posts ")
Text("Followers")
}
}
}ตรวจสอบความเข้าใจอย่างรวดเร็ว
การจัดวางแบบใดที่ซ้อนองค์ประกอบลูกทับกัน
สรุปทบทวน
การจัดวางหลักสามแบบ:
Column— ซ้อนในแนวตั้งRow— ซ้อนในแนวนอนBox— ชั้นที่วางซ้อนกัน โดยcontentAlignmentใช้จัดเนื้อหาให้อยู่กึ่งกลาง
ทั้งสามแบบสามารถซ้อนกันได้อย่างอิสระ เพื่อสร้างหน้าจอทุกรูปแบบ
คำถามที่พบบ่อย
บทเรียน “Column, Row และ Box” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Column, Row และ Box” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Column, Row และ Box”
จัดเรียง composable ในเค้าโครงทั่วไป คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “Column, Row และ Box” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม
ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Column, Row และ Box
- ระบบ Modifier
- การจัดแนวและการจัดวาง
- ลิสต์ด้วย LazyColumn