Flutter: ListView.builder constructor
ในการทำงานกับข้อมูล list จำนวนน้อยๆ เราแค่ใช้ ListView constructor ก้อเพียงพอแล้วนะคับ (แต่มีข้อจำกัดคือ เราต้องรู้จำนวนของ itemsที่จะนำมาแสดงผลที่แน่นอน)
แต่ถ้าต้องทำงานกับ list ซึ่งมีจำนวน items มากๆ ไม่รู้ว่ามีจำนวนเท่าไหร่ จะเป็นการดีกว่าที่เราจะใช้ ListView.builder constructor
อีกเรื่องหนึ่งที่แตกต่างกันระหว่าง ListView และ ListView.builder คือ
ListView: จะมีการ render Widget ทั้งหมดใน items ไม่ว่าเราจะมองเห็นหรือไม่เห็นก้อตาม
ในขณะที่ ListView.builder จะ render เฉพาะส่วนที่เรามองเห็นเท่านั้น ซึ่งจะทำให้ได้ performance ที่ดีกว่าและแสดงผลได้ไม่จำกัด
เริ่มกันเลยดีกว่าคับ จะได้เห็นภาพ
- Create a data source
ซึ่งในที่นี้จะสมมติขึ้นมาเป็นร้านขายหนังสือนะคับ ซึ่ง data source ของผมก้อจะหน้าตาประมาณนี้
2. สร้าง ListView.builder ขึ้นมาโดย widget นี้จะมีส่วนที่ต้องการหลักๆ 2 อย่างคือ itemCount และ itemBuilder
- itemCount: ให้เราระบุจำนวนของ items ที่จะเอามาใช้ (รับค่าเป็น int นะ)
- itemBuilder: อันนี้รับค่าเป็น Function นะ คือ ให้ระบุว่าจะ return อะไร
3. กำหนดสิ่งที่ต้องการแสดงใน Card() และใช้ interpolation {} ในการดึงค่ามาแสดงผลผ่านทาง Widget
หน้าตา code ที่ใช้นะคับ
ps: จริงๆแล้ว ListView.builder เราสามารถ return ออกมาเป็นอะไรก็ได้นะคับ ไม่เฉพาะแค่ Card() เท่านั้น (อาจจะเป็น Column, ListTile หรืออย่างอื่นก็ได้)
เพิ่มเติมคับ จริงๆแล้วใน ListView ยังมีรูปแบบ scrolling ให้เราใช้ใน attribute physics: ได้ด้วยนะตามนี้เลย
1. physics: const NeverScrollableScrollPhysics()
นี่คือการ disable scrolling โดยจะให้แสดงค่า ListView แค่พอดีกับหน้าจอเท่าน้น จะ scrolling เพิ่มไม่ได้
2. physics: const BouncingScrollPhysics()
แบบนี้จะเป็นลูกเล่นของการ bounces back ที่เมื่อ scroll จนสุดขอบของจอแล้ว ยังสามารถไถเพื่อเพิ่มให้เห็นเป็น area สีขาวๆได้ (เหมือนกับใน iOS นะ)
3. physics: const ClampingScrollPhysics()
นี่คือ default ของ ListView ที่ไถขึ้นลงได้ปกติ
4. physics: const FixedExtentScrollPhysics()
นี่คือ การทำ scrolling แบบมีลูกเล่นเหมือนขึ้นไปขั้นบันได (แต่ไม่ค่อยได้ใช้นะ และต้องใช้งานร่วมกับ controller ด้วย ไม่งั้นจะพัง)
FixedExtentScrollController fixedExtentScrollController =
new FixedExtentScrollController();ListWheelScrollView(
controller: fixedExtentScrollController,
physics: FixedExtentScrollPhysics(),
children: monthsOfTheYear.map((month) {
return Card(
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
month,
style: TextStyle(fontSize: 18.0),
),
)),
],
));
}).toList(),
itemExtent: 60.0,
),
