將一系列資料顯示在螢幕上,是我們很常遇到的使用情境,在 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 囉~
讚讚