A known ExpansionTile
Const ExpansionTile({Key Key, this.leading,// Widget@required this.title, / / to display the title of the widget. This backgroudColor, / / background enclosing onExpansionChanged, / / list open up the callback function enclosing the children = const [], / / list displayed when the widget This.trailing,// The widget to be shown to the right of the title is the icon this.initiallyExpanded=false,// is expanded by default})Copy the code
Show the required factors of the list
import 'package:flutter/material.dart'; void main()=>runApp(MyApp()); Const CITY_NAMES = {' Beijing ': [' in dongcheng district, xicheng district, changping district, chaoyang district, haidian district, shunyi,' the shijingshan district ', 'fengtai']. 'Shanghai' : [' huangpu district, xuhui district, Shanghai's changning district, jing 'an district, putuo district, zhabei, 'hongkou district],' guangzhou: [' yuexiu, haizhu, 'li wan, tianhe,' white cloud ', 'whampoa', 'the nansha]. 'shenzhen' : [' nan shan ', 'he', 'lo wu', 'salt', '3', 'the baoan', 'the longhua],' hangzhou: [' uptown ', 'downtown', 'jianggan district', 'gongshu district', 'lake', 'binjiang']. 'suzhou: [' gusu area', 'wuzhong district', 'city', 'high-tech', 'district', 'industrial park', 'wujiang district],}; Class MyApp extends StatelessWidget{final title =' List expansion '; @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( title: title, home: Scaffold( appBar: AppBar(title: Text(title)), body: Container( child:ListView( children: _buildList(), ), ), ), ); } } List _buildList() { List widgets =[]; CITY_NAMES.keys.forEach((key){ widgets.add(_item(key,CITY_NAMES[key])); }); return widgets; } Widget _item(String city, List city_names) { return ExpansionTile( title: Text( city, style: TextStyle(fontSize: 20,color: Colors.black54), ), children: city_names.map((subcity)=>_buildSub(subcity)).toList(), ); } Widget _buildSub(String subcity) { return FractionallySizedBox( widthFactor: 1, child: Container( height: 50, alignment: Alignment.centerLeft, margin: EdgeInsets.only(bottom: 5), decoration: BoxDecoration(color: Colors.lightBlueAccent), child: Text(subcity), ), ); }Copy the code