【Flutter】ListView 列表 ( List 集合的 map 方法說明 | 垂直列表 | 水平列表 | 代碼示例 )

文章目錄

一、List 集合的 map 方法說明 ( 生成 listView 組件集合 )

二、listView 垂直列表

三、ListView 水平列表

四、相關資源

一、List 集合的 map 方法說明 ( 生成 ListView 組件集合 )

ListView 列表的控件條目 , 一般是遍歷集合生成的 ;

如 : 給定如下 List 集合 ;

const NAMES = [ '宋江', '盧俊義', '吳用', '公孫勝', '關勝'];

1

調用 List 集合的 map 方法 , 可以遍歷操作集合中的每一項 , 返回一個新的數組 ;

map 方法的原型如下 ;

Iterable map(T f(E e)) => MappedIterable(this, f);

1

使用 map 方法 , 遍歷 NAMES 集合 , 然后傳入的匿名方法中 , 返回 Widget 組件 , 那么上述原型中的泛型 T 就是 Widget 類型 ;

下面的方法中 ,

map 方法傳入了一個匿名函數

, 參數是 name , 類型是 String , 返回值是 _generateWidget 函數的返回值 , 其中

_generateWidget 函數返回 Widget 類型

, 最終

map 方法的返回值是 Iterable 類型

, 然后調用

toList() 方法

, 將其轉為

List 類型 ;

NAMES.map((name) => _generateWidget(name)).toList();

1

二、ListView 垂直列表

完整代碼示例 :

import 'package:flutter/material.dart'; const NAMES = [ '宋江', '盧俊義', '吳用', '公孫勝', '關勝', '林沖', '秦明', '呼延灼', '花榮', '柴進', '李應', '朱仝', '魯智深', '武松', '董平', '張清', '楊志', '徐寧', '索超', '岱宗', '劉唐', '李逵', '史進', '穆弘' '雷橫' ]; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { @override Widget build(BuildContext context) { /// 材料設計主題 return MaterialApp( home: Scaffold( appBar: AppBar( /// 標題組件 title: Text("ListView 示例"), ), /// 列表組件 body: ListView( children: _buildList(), ), ), ); } /// 創建列表 List _buildList(){ /// 遍歷 NAMES 數組 /// 調用 map 方法遍歷數組元素 return NAMES.map((name) => _generateWidget(name)).toList(); } Widget _generateWidget(name){ return Container( height: 80, margin: EdgeInsets.only(bottom: 5), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.black), child: Text( name, style: TextStyle( color: Colors.yellowAccent, fontSize: 20 ), ), ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

執行結果 :

三、ListView 水平列表

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; const NAMES = [ '宋江', '盧俊義', '吳用', '公孫勝', '關勝', '林沖', '秦明', '呼延灼', '花榮', '柴進', '李應', '朱仝', '魯智深', '武松', '董平', '張清', '楊志', '徐寧', '索超', '岱宗', '劉唐', '李逵', '史進', '穆弘' '雷橫' ]; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { @override Widget build(BuildContext context) { /// 材料設計主題 return MaterialApp( home: Scaffold( appBar: AppBar( /// 標題組件 title: Text("ListView 示例"), ), /// 列表組件 body: ListView( /// 水平滾動設置 scrollDirection: Axis.horizontal, children: _buildList(), ), ), ); } /// 創建列表 List _buildList(){ /// 遍歷 NAMES 數組 /// 調用 map 方法遍歷數組元素 return NAMES.map((name) => _generateWidget(name)).toList(); } Widget _generateWidget(name){ return Container( //height: 80, width: 80, //margin: EdgeInsets.only(bottom: 5), margin: EdgeInsets.only(right: 5), alignment: Alignment.center, decoration: BoxDecoration(color: Colors.black), child: Text( name, style: TextStyle( color: Colors.yellowAccent, fontSize: 20 ), ), ); } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

執行結果 :

四、相關資源

參考資料 :

flutter 官網 : https://flutter.dev/

Flutter 插件- : https://pub.dev/packages

Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社區 : https://flutter.cn/

Flutter 實用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文檔 : https://dart.cn/

Dart 開發者官網 : https://api.dart.dev/

Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )

GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510

Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

Dart 語言練習網站 : https://dartpad.dartlang.org/

重要的專題 :

Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

GitHub 地址 : https://github.com/han1202012/flutter_listview ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

博客源碼快照 : https://download.csdn.net/download/han1202012/21586807 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

Flutter ListView

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。