Flutter Mobile Development · บทเรียน

การสร้างรายการเลื่อนได้ด้วย ListView

แสดงชุดข้อมูลที่เลื่อนได้อย่างมีประสิทธิภาพใน Flutter ด้วย ListView, ListView.builder และตัวคั่นรายการ

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

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why ListView?

Most apps show lists: messages, products, feeds. A ListView arranges its children in a scrollable column, handling overflow automatically when content exceeds the screen.

A Simple ListView

Pass a fixed set of children. Good for short, known lists.

ListView(
  children: [
    Text("Apple"),
    Text("Banana"),
    Text("Cherry"),
  ],
)

ListTile for Rows

ListTile is a ready-made row with leading icon, title, subtitle, and trailing widget, perfect for menus and settings.

ListTile(
  leading: Icon(Icons.person),
  title: Text("Ada Lovelace"),
  subtitle: Text("Mathematician"),
  trailing: Icon(Icons.chevron_right),
)

The Problem with Long Lists

A plain ListView builds every child up front. For hundreds of items this wastes memory and slows startup. We need lazy building.

ListView.builder

ListView.builder creates items on demand as they scroll into view, so only visible rows exist in memory.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)

itemCount and itemBuilder

itemCount tells Flutter how many rows exist; itemBuilder is called with each index to build that row. Omitting itemCount makes an infinite list.

Adding Separators

ListView.separated inserts a divider widget between items, keeping spacing consistent.

ListView.separated(
  itemCount: items.length,
  itemBuilder: (c, i) => ListTile(title: Text(items[i])),
  separatorBuilder: (c, i) => Divider(),
)

Horizontal Lists

Set scrollDirection: Axis.horizontal to scroll sideways, useful for carousels and chip rows.

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: tags.length,
  itemBuilder: (c, i) => Chip(label: Text(tags[i])),
)

Lists Inside Columns

A ListView wants unbounded height, which conflicts with a Column. Wrap it in Expanded to give it the remaining space.

Column(
  children: [
    Text("Header"),
    Expanded(
      child: ListView.builder(...),
    ),
  ],
)

Handling Taps

Make rows interactive with onTap on a ListTile or by wrapping items in GestureDetector/InkWell.

ListTile(
  title: Text(items[index]),
  onTap: () => print("Tapped " + items[index]),
)

Putting It Together

Use ListView.builder for performance, ListTile for clean rows, separated for dividers, and wrap in Expanded inside columns.

Quick Check

Test your understanding of Flutter lists.

Recap

You built scrollable lists:

  • ListView for short fixed lists
  • ListView.builder for efficient long lists
  • ListTile rows and separated dividers
  • Wrap in Expanded inside a Column
เริ่มต้นได้ฟรี

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

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

คอร์ส
22
บทเรียน
88

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

บทเรียน “การสร้างรายการเลื่อนได้ด้วย ListView” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างรายการเลื่อนได้ด้วย ListView”

แสดงชุดข้อมูลที่เลื่อนได้อย่างมีประสิทธิภาพใน Flutter ด้วย ListView, ListView.builder และตัวคั่นรายการ คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การสร้างรายการเลื่อนได้ด้วย ListView” ใช้เวลานานแค่ไหน

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

ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม

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

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

  1. วิดเจ็ต Stateless และ Stateful
  2. วิดเจ็ตการจัดวางพื้นฐาน
  3. องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ
  4. การสร้างรายการเลื่อนได้ด้วย ListView
← กลับไปที่ Flutter Mobile Development