🔖 หมวดบทเรียน: การแสดงผลรายการแบบเลื่อนในหน้าจอ
📌 เหมาะสำหรับ: ผู้ที่ต้องการแสดงข้อมูลหลายรายการ เช่น รายชื่อลูกค้า สินค้า เมนู ฯลฯ
🎯 เป้าหมาย: เรียนรู้การใช้
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