如何在 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),
我在 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),