2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結
哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第二十四天,KT 將為大家來介紹,ListView 列表元件。
ListView 列表元件可以透過 scrollDirection 屬性來改變垂直或水平滾動顯示列表資料,通常搭配 ListTile 一起使用。當需要大量資料時建議使用 ListView.builder 來建立列表資料。
ListView 和 ListView.builder 最大的差異是 ListView 是一次建立完所有列表資料,如果記憶體沒有管理好很容易造成APP閃退,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 {
//列表集合資料
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,
),
);
}
}
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('測試資料')],
)
],
),
);
}
}
透過資料產生器,產生大量資料
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});
}
那今天【iT邦幫忙鐵人賽】就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~
HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com