Jetpack Compose Academy · บทเรียน

LazyRow สำหรับภาพหมุน

สร้างชั้นวางที่เลื่อนในแนวนอน

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

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

เลื่อนด้านข้าง

บางครั้งเนื้อหาควรเลื่อนไปทางซ้ายและขวา เช่น ชั้นวางภาพยนตร์ สำหรับกรณีนี้ให้ใช้ LazyRow ซึ่งเป็นคู่หูแนวนอนของ LazyColumn ↔️

ทำไมไม่ใช้ Row แบบธรรมดา

Row แบบธรรมดาจะประกอบลูกทุกตัวทันทีและเลื่อนไม่ได้ ส่วน LazyRow จะเลื่อนในแนวนอนและสร้างเฉพาะรายการที่อยู่ในบริเวณที่มองเห็น

LazyRow พื้นฐาน

คุณส่ง items ให้กับ LazyRow เช่นเดียวกับคอลัมน์ แต่รายการจะเรียงต่อกันด้านข้างแทนการซ้อนกันในแนวตั้ง

LazyRow {
    items(movies) { movie ->
        MovieCard(movie)
    }
}

เว้นระยะระหว่างการ์ด

การ์ดแบบแถบเลื่อนต้องมีช่องว่าง ใช้ horizontalArrangement ร่วมกับ spacedBy เพื่อกำหนดระยะห่างที่สม่ำเสมอระหว่างการ์ดแต่ละใบ

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }

ระยะขอบที่ปลายทั้งสองด้าน

เพิ่ม contentPadding เพื่อให้เห็นการ์ดใบแรกโผล่เข้ามาจากขอบ แทนที่จะถูกตัดชิดขอบพอดี

contentPadding = PaddingValues(horizontal = 16.dp)

กำหนดขนาดการ์ดแต่ละใบ

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

MovieCard(movie, Modifier.width(140.dp))

เห็นการ์ดใบถัดไปบางส่วน

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

val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))

ส่วนหัวเหนือแถบเลื่อน

โดยทั่วไปแถบเลื่อนจะอยู่ใต้ชื่อส่วน ให้ประกอบ LazyRow ไว้ภายใน Column และวางส่วนหัว Text ไว้ด้านบน

Column {
    Text("Trending Now")
    LazyRow { items(movies) { MovieCard(it) } }
}

การวางซ้อนใน LazyColumn

หน้าหลักมักเรียงแถบเลื่อนหลายแถบซ้อนกัน ให้วางแถว LazyRow หลายแถวไว้ภายใน LazyColumn หลัก เพื่อสร้างฟีดสไตล์ Netflix

LazyColumn {
    items(shelves) { shelf ->
        Shelf(shelf)
    }
}

แต่ละแถวต้องมีความกว้าง

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

เมื่อใดควรใช้ LazyRow

เลือกใช้ LazyRow สำหรับชั้นวาง ตัวกรองแบบชิป บับเบิลเรื่องราว และเนื้อหาใด ๆ ที่เชิญชวนให้ปัดในแนวนอนแทนการเลื่อนลงด้านล่าง

ตรวจสอบอย่างรวดเร็ว

ลองนึกถึงการเลื่อนในแนวนอน

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

สรุป: แถบเนื้อหาเลื่อน

คุณสร้างชั้นวางแนวนอนด้วย LazyRow ซึ่งประกอบด้วยรายการที่วางเคียงกัน ระยะห่าง ช่องว่างท้าย แผงการ์ดความกว้างคงที่ และการซ้อนกันภายในฟีด 🎬

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

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

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

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

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

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

บทเรียน “LazyRow สำหรับภาพหมุน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “LazyRow สำหรับภาพหมุน”

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

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

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

บทเรียน “LazyRow สำหรับภาพหมุน” ใช้เวลานานแค่ไหน

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

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

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

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

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