Jetpack Compose Academy · บทเรียน

FlowRow ที่ตัดชิปขึ้นบรรทัดใหม่

สร้างเลย์เอาต์ที่ตัดขึ้นบรรทัดใหม่ได้จริงตั้งแต่ต้น

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

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

สิ่งที่แถวแบบไหลทำ

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

เริ่มจาก Composable เลย์เอาต์

คุณรู้จักเครื่องมือนี้อยู่แล้ว นั่นคือ Composable เลย์เอาต์ ตรรกะการตัดบรรทัดทั้งหมดอยู่ที่วิธีวัดและจัดวางองค์ประกอบลูก

Layout(content, modifier) { measurables, constraints ->
}

วัดองค์ประกอบลูกแบบไม่บังคับขนาด

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

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

ติดตามความกว้างของแถวปัจจุบัน

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

ตัดบรรทัดเมื่อแถวล้น

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

if (rowWidth + placeable.width > maxWidth) {
  y += rowHeight
  rowWidth = 0
}

จดจำตำแหน่งของชิปแต่ละรายการ

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

คำนวณความสูงทั้งหมด

หลังแถวสุดท้าย ความ สูง ของเลย์เอาต์คือค่า y สุดท้ายบวกความสูงของแถวนั้น ส่วนความกว้างก็คือ maxWidth ของข้อจำกัด

รายงานขนาดและจัดวางชิป

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

layout(maxWidth, totalHeight) {
  placeables.forEachIndexed { i, p ->
    p.placeRelative(positions[i])
  }
}

เพิ่มระยะห่างแนวนอน

แทรกช่องว่างเล็ก ๆ ระหว่างชิปโดยเพิ่มค่า ระยะห่าง ลงในความกว้างของแถวหลังชิปแต่ละรายการ ช่องว่างแนวตั้งก็ทำเช่นเดียวกัน

Compose มี FlowRow ให้ใช้เช่นกัน

FlowRow อย่างเป็นทางการจากไลบรารีเลย์เอาต์ทำทั้งหมดนี้ให้คุณ การสร้างขึ้นเองช่วยให้เห็นอย่างชัดเจนว่ากลไกนี้ทำงานเบื้องหลังอย่างไร ✨

FlowRow { Chip("Kotlin"); Chip("Compose") }

คุณสร้างเลย์เอาต์จริงได้แล้ว

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

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

อะไรเป็นตัวกระตุ้นให้แถวแบบไหลเริ่มบรรทัดใหม่

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

สรุป: FlowRow ที่ตัดบรรทัดชิป

คุณวัดชิปแบบไม่บังคับขนาด ติดตามความกว้างของแถว และ ตัดขึ้นบรรทัดใหม่ เมื่อมีรายการล้น จากนั้นจึงจัดวางแต่ละรายการ นี่คือ FlowRow ที่สร้างขึ้นตั้งแต่ต้น ✅

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

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

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

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

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

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

บทเรียน “FlowRow ที่ตัดชิปขึ้นบรรทัดใหม่” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “FlowRow ที่ตัดชิปขึ้นบรรทัดใหม่”

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

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

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

บทเรียน “FlowRow ที่ตัดชิปขึ้นบรรทัดใหม่” ใช้เวลานานแค่ไหน

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

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

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

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

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