將一系列資料顯示在螢幕上，是我們很常遇到的使用情境，在 iOS 上是叫做 TableView，而在 Flutter 則叫為 ListView，我們可以做出非常類似的 UI/UX。
ListView Widget 將很好使用。🤠
首先來看一次產生出資料介面：
/*
Author: HappyMan
Date: 2022/02/14
Topic: ListView Class
*/
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('Happy List View'),
),
body: ListView(
padding: const EdgeInsets.all(20),
// scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[400],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
),
);
}
}
執行後顯示如最上兩張截圖。其中 scrollDirection 屬性可以設定是 Axis.horizontal 或 Axis.vertical，讓 ListView 直式或橫式捲動。
接著我們使用 ListView.builder 來顯示介面，它可以在需要顯示的時候，延遲創建介面（built lazily），且可以無限多個介面。
/*
Author: HappyMan
Date: 2022/02/14
Topic: ListView Class
*/
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final List<String> entryList = <String>['A', 'B', 'C'];
final List<int> colorList = <int>[600, 400, 100];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Happy List View'),
),
body: ListView.builder(
// scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(20),
itemCount: entryList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[colorList[index]],
child: Center(child: Text('Entry ${entryList[index]}')),
);
}
),
),
);
}
}
顯示結果跟前者是一模一樣喔～
若我們想要有「分隔線」，則可以使用 ListView.separated，效果跟 ListView.builder 類似，其中多了 separatorBuilder 屬性。
/*
Author: HappyMan
Date: 2022/02/14
Topic: ListView Class
*/
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final List<String> entryList = <String>['A', 'B', 'C'];
final List<int> colorList = <int>[600, 400, 100];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Happy List View'),
),
body: ListView.separated(
// scrollDirection: Axis.horizontal,
padding: const EdgeInsets.all(50),
itemCount: entryList.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[colorList[index]],
child: Center(child: Text('Entry ${entryList[index]}')),
);
},
separatorBuilder: (BuildContext context, int index) {
return const Divider(
height: 50,
thickness: 2,
indent: 50,
color: Colors.green,
);
},
),
),
);
}
}
執行後顯示如下圖，分隔線可以設定粗細、顏色、高度等等。現在是用內建的 Divider，亦可自行設計分隔介面。
參考：
ListView (Flutter Widget of the Week)
逍遙文工作室 
Comments on: "[Flutter] ListView Widget" (1)
開始 Flutter 精進計畫！要取代舊的 App 囉～
讚讚