展开收起之ExpansionTile

先来看看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的基本没啥区别