Google Flutter

Flutter 3 นาทีกับ ReorderableListView: สร้างรายการแบบลากวาง ง่ายจัง!

เรื่องที่เกี่ยวข้อง - Flutter 3 นาที, Google Flutter, ListView, ReorderableListView, เรียน Flutter
Flutter Reorderable ListView โค้ชพล

Google Flutter วันละนิดกับโค้ชพลวันนี้ เราจะมาพูดถึงการแสดงข้อมูลรูปแบบของรายการ (ListView) ที่สามารถลากวาง สลับตำแหน่งได้ด้วย!

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

คำตอบคือ Reorderable Listview นั่นเอง

มีประโยชน์มาในหลายสถานการณ์ เช่น

  • จัดลำดับความสำคัญของข้อมูล
  • จัดลำดับเพลง
  • ทำแบบเรียน ที่ให้เรียงลำดับขั้นตอนในการตอบโจทย์ปัญหา
  • เรียง Process ใหม่ของลำดับงาน

การใช้งาน Reorderable ListView จะแตกต่างจาก ListView แบบธรรมดา ตรงส่วนการสร้างรายการข้อมูล (Item) ขึ้นมา ทำความเข้าใจได้ในคลิปด้านล่างเลยครับ

เรื่องที่เราจะคุย และทำกันในคลิปวิดีโอ

  • แนะนำให้รู้จักกับ ReorderableListView Widget
  • วิธีสร้าง Item ใน ReorderableListView ที่ไม่เหมือนกับ ListView ธรรมดา
  • ใช้งานระบบลากวางข้อมูลบน ReorderableListView
  • วิธีใช้งาน ListView แบบ Drag & Drop
  • วิธีใช้งานคำสั่ง onReorder function แบบเข้าใจง่าย
  • วิธีอัพเดตข้อมูลที่จัดเรียงใหม่แล้ว

สามารถโคลนโปรเจคมาทำไปด้วยกันได้จาก

https://github.com/teerasej/nextflow_widget_reorderlistview

ดูวิดีโอทั้งหมดในซีรี่ย์ Flutter 3 นาที

และยังสามารถกดดูวิดีโอทั้งหมดในซีรี่ส์ Flutter 3 นาที ได้ที่นี่เลย อย่าลืมกด subscribe พร้อมเปิดกระดิ่งแจ้งเตือนล่ะ

เริ่มต้นเรียนรู้สร้างแอพ iOS และ Android ด้วย Google Flutter ไปกับโค้ชพล

เหมาะสำหรับผู้เริ่มต้น

เขียนครั้งเดียว ใช้ได้ทั้งระบบ iOS และ Android ประหยัดเวลา

เรียนได้ทุกเวลา ไม่มีวันหมดอายุ

ได้รู้ตั้งแต่วิธีติดตั้งโปรแกรม จนเอาขึ้นApp Store และ Play Store

ได้ทำแอพของจริง เริ่มต้นจาก 0 ทุกโปรเจค มีระบบถามตอบ กรณีติดปัญหา

 

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save