Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 12: การใช้งาน ListView และ ListTile

🔖 หมวดบทเรียน: การแสดงผลรายการแบบเลื่อนในหน้าจอ

📌 เหมาะสำหรับ: ผู้ที่ต้องการแสดงข้อมูลหลายรายการ เช่น รายชื่อลูกค้า สินค้า เมนู ฯลฯ

🎯 เป้าหมาย: เรียนรู้การใช้ ListView และ ListTile ในการแสดงรายการข้อมูลแบบแนวตั้ง พร้อมตกแต่งแต่ละรายการ

🧭 เกริ่นนำ

หากแอปของคุณมีข้อมูลหลายรายการ เช่น รายชื่อ, ข่าว, สินค้า การใช้ ListView จะช่วยให้สามารถแสดงผลรายการเหล่านั้นในรูปแบบเลื่อน (scroll) ได้อย่างมีประสิทธิภาพ และสามารถใช้ ListTile เพื่อจัด layout ของแต่ละแถวได้สะดวกขึ้น

📋 ListView แบบพื้นฐาน

ListView(
  children: [
    Text("รายการที่ 1"),
    Text("รายการที่ 2"),
    Text("รายการที่ 3"),
  ],
)

🔁 ListView.builder (สร้างรายการจากลิสต์)

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

เหมาะสำหรับข้อมูลจำนวนมากที่ไม่รู้จำนวนแน่นอนล่วงหน้า

🧱 การใช้ ListTile

ListTile เป็น widget ที่ใช้แสดงข้อมูล 1 แถว พร้อม title, subtitle, icon หรือ trailing

ListTile(
  leading: Icon(Icons.person),
  title: Text("ชื่อผู้ใช้"),
  subtitle: Text("อีเมล"),
  trailing: Icon(Icons.arrow_forward_ios),
)

🧪 ตัวอย่างรวม

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<String> users = ["คุณเอ", "คุณบี", "คุณซี"];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("รายชื่อผู้ใช้")),
        body: ListView.builder(
          itemCount: users.length,
          itemBuilder: (context, index) {
            return ListTile(
              leading: CircleAvatar(child: Text(users[index][0])),
              title: Text(users[index]),
              trailing: Icon(Icons.chat),
              onTap: () {
                print("แตะที่: \${users[index]}");
              },
            );
          },
        ),
      ),
    );
  }
}

✅ สรุป

  • ListView ใช้สำหรับแสดงรายการแบบแนวตั้งเลื่อนได้
  • ListView.builder เหมาะกับข้อมูลที่สร้างตามลำดับจากลิสต์
  • ListTile ทำให้การจัด layout ของแต่ละรายการสะดวกและดูดีขึ้น

ในบทถัดไป เราจะเรียนรู้เกี่ยวกับ Icon และการจัดการ Asset ภาพในแอป Flutter