Flutter开发：折叠效果对应的组件使用

Posted 2021-12-30 三掌柜666

前言

在Flutter开发中，熟练使用各种组件是必备技能，尤其是实际开发需求是错综复杂的，各种奇葩需求，必须要对常用的组件使用要很熟悉才行，那么本文就来分享一个在Flutter开发中比较常用的效果，表格折叠，或者说是对于table列表进行折叠的效果，这也是基于移动端开发的特点。接下来就来介绍一下关于Flutter开发中折叠组件的使用以及折叠效果实现的操作。

折叠效果

Flutter中的折叠效果主要是通过使用ExpansionPanel，结合使用headerBuilder和body来实现。

折叠组件

Flutter中的实现折叠效果的组件就是ExpansionPanelList和ExpansionPanel组合使用。

ExpansionPanelList ：扩展列表的组件，类似ListView组件；

ExpansionPanel：类似于ListView中子View，也包含有扩展头和折叠部分；

注意：ExpansionPanelList需要被SingleChildScrollView包裹，否则会抛出异常。

1、ExpansionPanelList的源码：

const ExpansionPanelList(

    Key? key,

    this.children = const <ExpansionPanel>[],

    this.expansionCallback,

    this.animationDuration = kThemeAnimationDuration,

    this.expandedHeaderPadding = _kPanelHeader