Flutter进阶实战 13-20 展开闭合ExpansionTile组件案例

前言：手机的屏幕本身就很小，所以要合理利用空间，把主要的元素展示出来，次要或者不重要的元素等用户向看的时候再给用户展示。这类操作最常见的交互就是展开和闭合了。这里我们主要学习一下ExpansionTile组件的使用。

实现效果：

知识点：

ExpansionTile组件

ExpansionTile Widget就是一个可以展开闭合的组件，常用的属性有如下几个。

• title:闭合时显示的标题，这个部分经常使用Text Widget。
• leading:标题左侧图标，多是用来修饰，让界面显得美观。
• backgroundColor: 展开时的背景颜色，当然也是有过度动画的，效果非常好。
• children: 子元素，是一个数组，可以放入多个元素。
• trailing ： 右侧的箭头，你可以自行替换但是我觉的很少替换，因为谷歌已经表现的很完美了。
• initiallyExpanded: 初始状态是否展开，为true时，是展开，默认为false，是不展开。

入口文件main.dart代码：

import 'package:flutter/material.dart';
import 'expansion_tile.dart';

void main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTile',
      theme: ThemeData.dark(),
      home: ExpansionTileDemo(),
    );
  }
}

expansion_tile.dart 扩展组件代码：

import 'package:flutter/material.dart';

class ExpansionTileDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ExpansionTileDemo')),
      body: Center(
        child: ExpansionTile(  //添加一个展开闭合的组件
          title: Text('Expansion Tile'),//闭合时的标题
          leading: Icon(Icons.ac_unit),
          backgroundColor: Colors.white24,   //闭合时的颜色
          children: [             //展开时子部件
            ListTile(
              title: Text('List Tile1'),
              subtitle: Text('subTitle1'),
            ),
            ListTile(
              title: Text('List Tile2'),
              subtitle: Text('subTitle2'),
            ),
            ListTile(
              title: Text('List Tile3'),
              subtitle: Text('subTitle3'),
            )
          ],
          initiallyExpanded: false, //初始状态为闭合状态(默认状态)
        ),
      ),
    );
  }
}