Flutter Widget 之 ExpansionPanel

应用程序中的常见模式是拥有一系列可以扩展以显示更多详细信息的项目

有时，这些详细信息并不能证明一个完全独立视图的必要性，但您需要它们在列表中排成一行，为此，请查看ExpansionPanel

这是一个在轻按时将战看面板的小部件，

从headerBuilder开始，它返回此面板的第一行，它需要一个上下文和布尔值,因此您可改面板处于打开状态还是关闭状态的外观， 并返回一个小部件

接下来是body，其中包含打开面板的内容

最后是布尔值isExpanded，用于表明此面板当前是否处于打开状态

ExpansionPanel(
    headerBuilder: (context, isOpen) {
        return Text('Hello');
    },
    body: Text('Now Open!'),
    isExpanded: /* ??? */,
)

但是，如何处理此标志？好吧，ExpansionPanels几乎完全作为ExpansionPanelLists的子项出现，在这里，我们可以保持一个打开的面板列表并使用ExpansionPanelList的expansionCallback参数进行更新

该回调函数将获取刚刚被点击的面板的索引以及该面板当前是否处于打开状态。

假设您的ExpansionPanelList位于又状态的小部件中就可以setState来切换该标志

List<bool> _isOpen;

ExpansionPanelList(
    children: [
        ExpansionPanel(
            isExpanded: 
        ),
    ],
    expansionCallback: (i, isOpen) => 
         setState(() => _isOpen[i] = !isOpen);
)

并在每个ExpansionPanel的isExpanded中使用此值

List<bool> _isOpen;

ExpansionPanelList(
    children: [
        ExpansionPanel(
            isExpanded: _isOpen[0],
        ),
        ExpansionPanel(
            isExpanded: _isOpen[1],
        ),
        /* ... */
    ],
    expansionCallback: (i, isOpen) => 
         setState(() => _isOpen[i] = !isOpen);
)

大概就是这样！

但是，您也可以使用列表animatioonDuration、dividerColor、elevatioon和expandedHeaderPadding来定制面板的外观，或者使用面板的canTapOnHeader标志来说明是否可以点击扩展整个标题

ExpansionoPanelList(
    animationDuration: Duration(seconds: 2),
    dividerColor: Colors.pink,
    elevation: 1,
    expandedHeaderPadding: EdgeInsets.all(8),
    children: [
        ExpansionPanel(
            canTapOnHeader: true,
        ),
    ]
)

如果想了解有关ExpansionPanel的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址