文章目录
一、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> { @override Widget 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 ), ), ), ); } }
执行效果 :