คอนเทนเนอร์ของเลย์เอาต์

Jetpack Compose มีคอนเทนเนอร์เลย์เอาต์หลายรายการเพื่อช่วยคุณจัดโครงสร้างและจัดเรียงคอมโพเนนต์ UI แม้ว่า Composable ของเลย์เอาต์พื้นฐานอย่าง Row และ Column จะจัดการการจัดเรียงที่ตรงไปตรงมาได้ แต่แอปจำนวนมากต้องการโซลูชันคอนเทนเนอร์ที่ปรับเปลี่ยนตามอุปกรณ์และปรับเปลี่ยนได้มากขึ้นเมื่อขนาดหน้าจอเปลี่ยนแปลงและข้อมูลผู้ใช้เพิ่มขึ้น

คอนเทนเนอร์เลย์เอาต์ประกอบด้วยรายการต่อไปนี้

• Lazy list และ Lazy grid: คอมโพเนนต์ เช่น LazyColumn, LazyRow และ LazyVerticalGrid ที่แสดงชุดข้อมูลขนาดใหญ่หรือขนาดแบบไดนามิกได้อย่างมีประสิทธิภาพโดยการคอมโพสและจัดวางเฉพาะรายการที่มองเห็นได้ในวิวพอร์ตเท่านั้น
• เพจเจอร์: คอนเทนเนอร์ เช่น HorizontalPager และ VerticalPager ที่ช่วยให้ผู้ใช้ปัดหรือเลื่อนระหว่างหน้าเนื้อหาได้
• เลย์เอาต์แบบ Flow: คอนเทนเนอร์แบบ 1 มิติที่ปรับเปลี่ยนตามพื้นที่โฆษณา (FlowRow และ FlowColumn) ซึ่งจะตัดรายการที่ล้นไปยังแถวหรือคอลัมน์ถัดไปโดยอัตโนมัติเมื่อพื้นที่หมด
• ตารางกริด: โครงสร้าง 2 มิติที่ยืดหยุ่นซึ่งแสดงรายการในเลย์เอาต์แบบหลายคอลัมน์หรือหลายแถวที่ปรับตามขนาดคอนเทนเนอร์
• FlexBox: คอนเทนเนอร์แบบปรับเปลี่ยนได้ที่ได้รับแรงบันดาลใจจาก CSS Flexbox ซึ่งช่วยให้ควบคุมวิธีที่รายการตัดขึ้นบรรทัดใหม่ ขยาย ย่อ และจัดแนวตามแกนหลักและแกนไขว้เพื่อเติมเต็มพื้นที่ว่างได้อย่างละเอียด

เลือกคอนเทนเนอร์เลย์เอาต์ที่ถูกต้อง

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

ตารางต่อไปนี้สรุปความสามารถของคอนเทนเนอร์เลย์เอาต์ 1 มิติของ Compose แต่ละรายการ

คอนเทนเนอร์	ตัดรายการขึ้นบรรทัดใหม่	การขยายต่อรายการ	การหดตัวต่อรายการ	ขนาดเริ่มต้นต่อรายการ	รายการจะขยายจนเต็มพื้นที่ที่ใช้ได้ในหลายบรรทัด	จัดเรียงรายการใหม่	การโหลดแบบ Lazy Loading	เหมาะสำหรับ
แถว / คอลัมน์	❌	✅ (ผ่าน weight) บรรทัดเดียวเท่านั้น	❌	❌	❌	❌	❌	แถวที่มีลักษณะเหมือนกันซึ่งมีรายการจำนวนน้อยและคงที่ รายการต่างๆ พอดีกับขอบเขตที่มีอยู่และไม่จำเป็นต้องตัดขึ้นบรรทัดใหม่
FlowRow / FlowColumn	✅	จำกัด	❌	❌	บางส่วน	❌	❌	แทนที่โดย FlexBox
LazyRow / LazyColumn	❌	❌	❌	❌	❌	❌	✅	รายการที่ยาวหรือไม่มีที่สิ้นสุดซึ่งต้องแสดงผลเฉพาะรายการที่มองเห็นได้เพื่อเพิ่มประสิทธิภาพ ชุดข้อมูลแบบไดนามิกหรือชุดข้อมูลขนาดใหญ่ที่เลื่อนไปในทิศทางเดียว
FlexBox	✅	✅	✅	✅	✅	✅	❌	เลย์เอาต์ที่ต้องใช้ความสามารถในการปรับเปลี่ยน เช่น การระบุขนาดเริ่มต้น การขยาย/ย่อรายการแบบไดนามิก (grow/shrink) การจัดเรียงภาพใหม่ (order) หรือการจัดแนวแกนข้ามระดับรายการ (alignSelf) กำลังจัดเรียงรายการที่มีขนาดคละกัน

ตารางต่อไปนี้จะสรุปความสามารถของ Grid และ Composable อื่นๆ ที่คล้ายกัน

คอนเทนเนอร์	การตรวจสอบความสอดคล้องแบบเข้มงวด 2 มิติ	การขยายรายการ (คอลัมน์)	การขยายรายการ (แถว)	การโหลดแบบ Lazy Loading	เหมาะสำหรับ
ตารางกริด	✅	✅ (ผ่าน GridArea)	✅	❌	เลย์เอาต์ 2 มิติเชิงโครงสร้างที่รายการทั้งหมดอยู่บนหน้าจอ และต้องมีการจัดแนวแนวนอนและแนวตั้งอย่างชัดเจน การปรับโครงสร้างเลย์เอาต์ตามขนาดหน้าจอต่างๆ
LazyVerticalGrid	✅	✅ (ผ่าน span)	❌	✅	ฟีดแบบเลื่อนแนวตั้งและแคตตาล็อกขนาดใหญ่ที่ต้องใช้คอลัมน์
LazyStaggeredGrid	❌ (1 มิติเท่านั้น)	บางส่วน (เฉพาะแบบเต็มช่วง)	❌	✅	ฟีดแบบเลื่อนที่มีรายการที่มีความสูงต่างกัน
LazyHorizontalGrid	✅	❌	✅	✅	ภาพสไลด์แบบเลื่อนในแนวนอนหรือข้อมูลแบบแบ่งหน้าหลายแถว
การรวมแถวและคอลัมน์	❌	❌	❌	❌	การประกอบคอมโพเนนต์แบบง่าย เช่น การวางป้ายกำกับข้อความข้างไอคอน