【從零開始學 Flutter 程式設計】ListView 列表元件
【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言，開發 Android 和 iOS APP 應用程式。
ListView 列表元件
ListView 列表元件可以透過 scrollDirection 屬性來改變垂直或水平滾動顯示列表資料，通常搭配 ListTile 一起使用。當需要大量資料時建議使用 ListView.builder 來建立列表資料。
ListView 和 ListView.builder 最大的差異是 ListView 是一次建立完所有列表資料，如果記憶體沒有管理好很容易造成APP閃退，ListView.builder 則是當元件滾動到螢幕當下才進行創建。
範例：使用 ListView 垂直顯示列表資料
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
body: HomePage(),
));
}
}
class HomePage extends StatelessWidget {
//列表集合資料
List<Widget> list = <Widget>[
ListTile(
title: Text(
'測試標題一',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('測試內容一'),
leading: Icon(
Icons.event_seat,
color: Colors.blue,
),
),
ListTile(
title: Text(
'測試標題二',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('測試內容二'),
leading: Icon(
Icons.event_seat,
color: Colors.blue,
),
),
ListTile(
title: Text(
'測試標題三',
style: TextStyle(fontWeight: FontWeight.w600, fontSize: 20.0),
),
subtitle: Text('測試內容三'),
leading: Icon(
Icons.event_seat,
color: Colors.blue,
),
),
];
@override
Widget build(BuildContext context) {
return Center(
//列表元件
child: ListView(
children: list,
),
);
}
}
執行畫面
範例：使用 ListView 垂直顯示「自定義樣式」列表資料
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
body: HomePage(),
));
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
//列表元件
child: ListView(
children: <Widget>[
Row(
children: <Widget>[Text('測試資料'), Text('測試資料'), Text('測試資料')],
),
Column(
children: <Widget>[Text('測試資料'), Text('測試資料'), Text('測試資料')],
),
Row(
children: <Widget>[Text('測試資料'), Text('測試資料'), Text('測試資料')],
)
],
),
);
}
}
執行畫面
範例：使用 ListView.builder 垂直顯示「大量」列表資料
透過資料產生器，產生大量資料
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
body: HomePage(),
));
}
}
class HomePage extends StatelessWidget {
//透過資料產生器，產生資料
final List<Product> listItems = new List<Product>.generate(500, (i) {
return Product(
name: '測試資料 $i',
price: '售價：$i',
);
});
@override
Widget build(BuildContext context) {
return Center(
child: ListView.builder(
itemCount: listItems.length,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.event_seat),
title: Text('${listItems[index].name}'),
subtitle: Text('${listItems[index].price}'),
);
},
));
}
}
//產品資料
class Product {
final String name;
final String price;
Product({this.name, this.price});
}
執行畫面
那這次的課程就介紹到這邊囉～
順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉！！！掰掰～
