文章目錄

• 一、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>[], // 列表展示時顯示的 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); }

二、完整代碼示例

---

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<MyApp> {@overrideWidget build(BuildContext context) {/// 材料設計主題return MaterialApp(home: Scaffold(appBar: AppBar(/// 標題組件title: Text("ListView 示例"),),/// 列表組件body: ListView(children: _buildList(),),),);}/// 創建列表 , 每個元素都是一個 ExpansionTile 組件List<Widget> _buildList(){List<Widget> widgets = [];NAMES.keys.forEach((key) {widgets.add(_generateExpansionTileWidget(key, NAMES[key]));});return widgets;}/// 生成 ExpansionTile 組件 , children 是 List<Widget> 組件Widget _generateExpansionTileWidget(tittle, List<String>? 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),),),);} }

執行效果 :

三、相關資源

---

參考資料 :

• 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】ExpansionTile 可折叠列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。