在 Flutter 中设置开关按钮的图标 [关闭]

Posted 2023-02-23

【中文标题】在 Flutter 中设置开关按钮的图标 [关闭]

【英文标题】：Set the icon for switch button in Flutter [closed]

【发布时间】：2021-06-23 06:23:30

【问题描述】：

我想在开关打开时设置“完成”图标，在关闭时设置“关闭”图标。

这是一个示例图像：

我正在寻找与图片相同的拨动开关，在那个圆形中，当我滑动它时我需要勾选标记，当我滑动它时需要十字标记。

我该怎么做？

【问题讨论】：

这能回答你的问题吗？ How to use conditional statement within child attribute of a Flutter Widget (Center Widget)

【参考方案1】：

按下按钮时，使用 onPress() 函数切换布尔变量。调用 setState()。然后根据变量持有的值，改变从return语句返回的widget。

你需要的叫做条件渲染

您可以查找此内容并在 google 和 SO 上找到一些帖子。

【参考方案2】：

您可以尝试将boolean 值与switch 语句一起使用。

首先，声明一个boolean

var isOn = True;

然后，使用ternary 运算符有条件地呈现开/关图标小部件。您需要在按下按钮/图标时使用 setState 切换布尔值。

InkWell(
  onTap: () => setState(() => isOn = !isOn),
  child: isOn ? SwitchOnIconWidget() : SwitchOffIconWidget(),
)

或者，如果您想将它与onPressed 一起使用，那么您也可以这样做：

onPressed: () => setState(() => isOn = !isOn),
child: isOn ? SwitchOnIconWidget() : SwitchOffIconWidget(),