先来看看ExpansionTile的传参：
ExpansionTile({
Key key,
this.leading, // 左侧icon
@required this.title, // 标题必传
this.backgroundColor, // 背景色
this.onExpansionChanged, // 展开收起监听时间
this.children = const <Widget>[], //子元素
this.trailing, // 右侧icon
this.initiallyExpanded = false // 初始状态是否展开
})
具体实现：
import 'package:flutter/material.dart';
const CITY_NAMES = {
'北京': ['丰台', '西城', '东城', '顺义'],
'上海': ['普陀', '松江', '黄埔', '长宁'],
'广州': ['越秀', '珠海', '白云', '天河']
};
class MyExpansionTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
const title = '列表展开与收起';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
body: Container(
child: ListView(
children: _buildList(),
),
),
),
);
}
List<Widget> _buildList() {
List<Widget> widgets = [];
for (var key in CITY_NAMES.keys) {
widgets.add(_item(key, CITY_NAMES[key]!));
}
return widgets;
}
Widget _item(String city, List<String> cityNames) {
return ExpansionTile(
title: Text(
city,
style: const TextStyle(color: Colors.amber, fontSize: 20),
),
children: cityNames.map((cityName) => _buildSub(cityName)).toList(),
);
}
Widget _buildSub(String cityName) {
return FractionallySizedBox(
widthFactor: 1,
child: Container(
height: 40,
margin: const EdgeInsets.only(bottom: 4),
decoration: BoxDecoration(color: Colors.green[600]),
child: Text(cityName),
),
);
}
}
小结
这个widget的功能和element的Collapse的基本没啥区别
