【Flutter】ExpansionTile 可折疊列表

文章目錄

一、ExpansionTile 構造方法

二、完整代碼示例

三、相關資源

一、ExpansionTile 構造方法

下面是 ExpansionTile 的構造方法 ;

其中 required this.title 是必須要設置的參數 ;

class ExpansionTile extends StatefulWidget { /// Creates a single-line [ListTile] with a trailing button that expands or collapses /// the tile to reveal or hide the [children]. The [initiallyExpanded] property must /// be non-null. const ExpansionTile({ Key? key, this.leading, // 標題左側的 Widget 組件 required this.title, // 展示的列表標題 Widget this.subtitle, // 子標題 this.onExpansionChanged, // 列表 展開/折疊 回調函數 this.children = const [], // 列表展示時顯示的 Widget 組件集合 this.trailing, // 標題右側的 Widget 組件 this.initiallyExpanded = false, // 默認狀態下是否展開 , 默認不展開 this.maintainState = false, this.tilePadding, this.expandedCrossAxisAlignment, this.expandedAlignment, this.childrenPadding, this.backgroundColor, // 背景沿著 this.collapsedBackgroundColor, this.textColor, this.collapsedTextColor, this.iconColor, this.collapsedIconColor, }) : assert(initiallyExpanded != null), assert(maintainState != null), assert( expandedCrossAxisAlignment != CrossAxisAlignment.baseline, 'CrossAxisAlignment.baseline is not supported since the expanded children ' 'are aligned in a column, not a row. Try to use another constant.', ), super(key: key); }

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

二、完整代碼示例

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( children: _buildList(), ), ), ); } /// 創建列表 , 每個元素都是一個 ExpansionTile 組件 List _buildList(){ List widgets = []; NAMES.keys.forEach((key) { widgets.add(_generateExpansionTileWidget(key, NAMES[key])); }); return widgets; } /// 生成 ExpansionTile 組件 , children 是 List 組件 Widget _generateExpansionTileWidget(tittle, List? names){ return ExpansionTile( title: Text( tittle, style: TextStyle( color: Colors.black54, fontSize: 20 ), ), children: names!.map((name) => _generateWidget(name)).toList(), ); } /// 生成 ExpansionTile 下的 ListView 的單個組件 Widget _generateWidget(name){ /// 使用該組件可以使寬度撐滿 return FractionallySizedBox( widthFactor: 1, child: 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

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

執行效果 :

三、相關資源

參考資料 :

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/21590425 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

Flutter GitHub 華為開源鏡像站 Mirrors

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

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