【重要】基于ExpansionTile实现可展开的列表-文档和源码
来源:10-3 基于ExpansionTile实现可展开的列表【列表还可以这样做】

CrazyCodeBoy
2019-08-01
认识ExpansionTile
const ExpansionTile({
Key key,
this.leading,//标题左侧要展示的widget
this.title,//要展示的标题widget
this.backgroundColor,//背景
this.onExpansionChanged,//列表展开收起的回调函数
this.children = const <Widget>[],//列表展开时显示的widget
this.trailing,//标题有侧要展示的widget
this.initiallyExpanded = false,//是否默认状态下展开
})
如何实现可折叠的列表?
- 数据要求
ExpansionTile
下面是本节课程demo的源码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const CITY_NAMES = {
'北京': ['东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '顺义区'],
'上海': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区'],
'广州': ['越秀', '海珠', '荔湾', '天河', '白云', '黄埔', '南沙', '番禺'],
'深圳': ['南山', '福田', '罗湖', '盐田', '龙岗', '宝安', '龙华'],
'杭州': ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区'],
'苏州': ['姑苏区', '吴中区', '相城区', '高新区', '虎丘区', '工业园区', '吴江区']
};
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
final title = '水平';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Container(
child: ListView(
children: _buildList(),
),
),
),
);
}
List<Widget> _buildList() {
List<Widget> widgets = [];
CITY_NAMES.keys.forEach((key) {
widgets.add(_item(key, CITY_NAMES[key]));
});
return widgets;
}
Widget _item(String city, List<String> subCities) {
return ExpansionTile(
title: Text(
city,
style: TextStyle(color: Colors.black54, fontSize: 20),
),
children: subCities.map((subCity) => _buildSub(subCity)).toList(),
);
}
Widget _buildSub(String subCity) {
return FractionallySizedBox(
widthFactor: 1,
child: Container(
height: 50,
margin: EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(color: Colors.lightBlueAccent),
child: Text(subCity),
));
}
}
写回答
2回答
-
亮仔
2020-06-15
老师,如何在展开第二个的同时,关闭第一个呢
00 -
CrazyCodeBoy
提问者
2019-08-01
以上。
012019-08-14
相似问题
有和每节视频对应的文字版文档吗?
回答 1
这种文档在哪里可以找到?
回答 1