第一百二十二回 扩展内容

我们在上一章回中介绍了扩展列表相关的内容，本章回中将介绍 扩展内容.闲话休提，让我们一起Talk Flutter吧。

概念介绍

本章回中介绍的扩展内容类似上一章回中介绍的扩展列表，不过它不能包含多个子项目，而是把多条内容包含进来实现隐藏和展开功能。可以把他看作是扩展列表中的某个项目，只不过该项目没有专门的倒三角用来实现隐藏和展开内容的功能，而是通过点击标题(标题的颜色会自动改变)来隐藏和展开内容。

Flutter提供了ExpansionTile组件来表示扩展内容，本章回中将详细介绍它的使用方法。

使用方法

和其它的Widget类似，ExpansionTile组件提供了相关的属性来控制自己，下面是常用的属性：

• title属性: 用来控制标题中的内容；
• subtitle属性: 用来控制子标题中的内容,子标题位于标题下方；
• leading属性:用来控制标题前面显示的内容，通常是一个图标(Icon);
• trailing属性: 用来控制标题行尾部显示的内容；
• initiallyExpanded属性: 表示是否扩展显示children中的内容，默认值为false;
• onExpansionChanged属性:它是方法类型，点击标题时会回调此方法；
• children属性:用来存放被隐藏的内容，通常是一些小组件；

该组件的属性和ListTile组件的属性类似，大家可以参照ListTile组件的使用方法来使用该组件。

示例代码

ExpansionTile(
  title: const Text('signal expansionTile'),
  subtitle:const Text('sub signal expansionTile'),
  leading: const Icon(Icons.pages),
  trailing: const Text('end'),
  ///是否扩展显示children中的内容
  initiallyExpanded: false,
  onExpansionChanged: (value) {
    debugPrint('value: $value');
  },
  children: const [
    ListTile(title: Text("item 1"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
    ListTile(title: Text("item 2"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
    ListTile(title: Text("item 3"),leading: Icon(Icons.podcasts),trailing: Icon(Icons.check),),
  ],
),

上面的代码中使用了上一小节介绍的全部属性。我们在这里就不演示程序的运行结果了，建议大家自己动手去实践。

对比总结

最后我们对ExansionTile组件做一个总结：该组件可以通过children包含多个widget,并且默认隐藏这些widget,点击标题展开被隐藏的widget，再点击标题时关闭被隐藏的widget.它可以单独当作扩展内容来使用，也可以当作列表中的一项内容嵌入到ExpansionPanelList中。总之它既可以扩展内容也可以被包含到扩展内容中。

它扩展内容时与ExpansionPaneList扩展内容的不同之处在于可以自动打开/关闭被隐藏的widget(点击title可以打开/关闭)，而且title的颜色会自动改变 ,不过它没有右侧的倒三角,也没有divider。

有看官会说，它们都可以扩展内容，在项目中如何选择呢？ExpansionPaneList适合显示多条可扩展内容，ExpandTile只能照显示一条扩展内容。

看官们，与"扩展内容"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!