如何在 Flutter 中更改 ExpandablePanel onExpansion 的图标

How to change the Icon of an ExpandablePanel onExpansion in Flutter

我在 header 中有一个带有向下箭头图标的 ExpandablePanel,当您单击它时,ExpandablePanel 的 body 会展开,我希望当我单击它这个图标也变成向上的箭头,当我再次点击它时,又回到向下的箭头,依此类推。

这是我的代码:

    return ExpandableNotifier(
          controller: expandableController,
          child: ExpandablePanel(
            theme: const ExpandableThemeData(
              hasIcon: false,
              headerAlignment: ExpandablePanelHeaderAlignment.center
            ),
            header: Icon(BeoticIcons.simply_down, color: BeoColors.lightGreyBlue),
            collapsed: SizedBox.shrink(),
            expanded:
              Row(
                children: [
                  Expanded(
                    child: Form(
                      key: UniqueKey(),
                      child: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: [
                              Flexible(
                                child: buildDateTimePickerContainer2()
                              ),
                              Flexible(
                                child: buildTimesInputFieldContainer2()
                              ),
                              //buildVerticalSpace(20.0)
                            ],
                          ),
                          buildButtonContainer()
                        ],
                      ),
                    ),
                  )
                ],
              )
          )
        );

您可以从 ExpandableController 获取状态并使用 expandableController.expanded 检查。更新控制器上的 UI addListener

@override
void initState() {
  super.initState();
  expandableController.addListener(() {
    setState(() {});
  });
}
....
header: Icon(
    expandableController.expanded
        ? Icons.arrow_upward
        : Icons.arrow_downward,
    color: Colors.blue),