ExpansionTile简介

可实现展开和收起效果

  const ExpansionTile({
    Key key,
    this.leading,//标题左侧要展示的widget
    @required this.title,//要展示的标题widget
    this.backgroundColor,//背景色
    this.onExpansionChanged,//列表展开收起的回调函数
    this.children = const <Widget>[],//列表展开时显示的widget
    this.trailing,//标题右侧要展示的widget
    this.initiallyExpanded = false,//是否默认状态下展开
  }) : assert(initiallyExpanded != null),
       super(key: key);

关键代码

import 'package:flutter/material.dart';

const APPBAR_SCROLL_OFFSET = 100; //设置滑动变化的偏移量
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
   static const _cityNames = {
    '北京': ['东城区', '西城区'],
    '郑州': ['高新区', '金水区'],
    '上海': ['黄浦区', '徐汇区'],
    '杭州': ['西湖区', '滨江区'],
  };
  double appBarAlpha = 0;
  int counter;
  _onScroll(offset) {
    double alpha = offset / APPBAR_SCROLL_OFFSET;
    if (alpha < 0) {
      alpha = 0;
    } else if (alpha > 1) {
      alpha = 1;
    }
    setState(() {
      appBarAlpha = alpha;
    });
    print(appBarAlpha);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  List<Widget> _buildList() {
    List<Widget> widgets = [];
    _cityNames.keys.forEach((key) {
      widgets.add(_item(key, _cityNames[key]));
    });
    return widgets;
  }

  Widget _item(String city, List<String> subCities) {
    return ExpansionTile(
        children: subCities.map((subCity) => _buildSub(subCity)).toList(),
        title: Text(
          city,
          style: TextStyle(
            color: Colors.black54,
            fontSize: 20,
          ),
        ));
  }

  Widget _buildSub(String subCity) {
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        height: 40,
        margin: EdgeInsets.only(bottom: 5,left: 12),
        //decoration: BoxDecoration(color: Colors.grey),
        child: Text(
          subCity,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('列表的展开和收起'),
      ),
      body: Container(
        height: 800,
        color: Colors.white,
        child: ListView(
          children: _buildList(),
        ),
      ),
    );
  }
}

效果图

列表的展开和收起.gif