Flutter 开关和切换高级指南

我们都熟悉家用开关来打开和关闭我们的照明系统和其他电器。 我们也熟悉切换按钮； 如果您家里有电炊具或电磁炉，您可以在其电压和烹饪功能之间切换。

同样，我们的移动应用程序也有开关和拨动开关来打开/关闭 Wi-Fi、蓝牙等。

今天，我们正在深入了解 Flutter 开关和切换的参数和属性。

目录

• 什么是开关小部件？

• 什么是切换小部件？

• 开关和拨动之间的关键区别

• 切换小部件示例

  • 安卓

  • iOS

  • 带图片的安卓开关

• 切换小部件示例

  • 单个和必需的拨动开关

  • 单个且不需要的拨动开关

  • 需要多选

  • 不需要的多项选择

• 创建自定义动画开关按钮

• 用于开关和切换的流行 Flutter 包

什么是开关小部件？

开关按钮是一个 Flutter 小部件，只有两种状态，真/假或开/关。 通常，开关是一个带有拇指滑块的按钮，用户可以将其从左拖动到右，反之亦然以在状态之间切换。 它不会自行维护其状态。 您必须致电 onChanged属性以保持按钮打开或关闭。

什么是切换小部件？

同样，切换小部件只有两种状态：真/假或开/关。 但是切换小部件会创建多个按行排列的按钮，允许用户在它们之间切换。

开关和拨动之间的关键区别

这是移动应用程序中的用例问题。 在大多数情况下，这些小部件用于设置页面。 如果您向下拖动移动应用程序的通知面板，您将看到一个切换按钮网格。 但是当您进入设置页面时，这些按钮将更改为开关。

你一定明白其中的区别。 在您的移动应用程序中，如果您有一个只需要两种状态的控件列表，您应该使用开关。 如果一行或网格中有多个控件，则应使用切换。

切换小部件示例

Flutter 提供了三种类型的 switch 小部件：

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

• 开关（安卓）

• CupertinoSwitch (iOS)

• Switch.adaptive（根据平台适配）

让我们看一下用于自定义小部件的最常用属性：

Switch（安卓）

Switch(
  // thumb color (round icon)
  activeColor: Colors.amber,
  activeTrackColor: Colors.cyan,
  inactiveThumbColor: Colors.blueGrey.shade600,
  inactiveTrackColor: Colors.grey.shade400,
  splashRadius: 50.0,
  // boolean variable value
  value: forAndroid,
  // changes the state of the switch
  onChanged: (value) => setState(() => forAndroid = value),
),

CupertinoSwitch(iOS)

CupertinoSwitch(
  // overrides the default green color of the track
  activeColor: Colors.pink.shade200,
  // color of the round icon, which moves from right to left
  thumbColor: Colors.green.shade900,
  // when the switch is off
  trackColor: Colors.black12,
  // boolean variable value
  value: forIos,
  // changes the state of the switch
  onChanged: (value) => setState(() => forIos = value),
),

自适应开关小部件没有任何独特或不同的属性。 但是安卓 Switch如果您想要图像或图标而不是通常的拇指颜色，可以进一步自定义小部件。 您需要使用资产图像定义拇指图像属性。 请看下面的代码。

安卓 Switch带图像

Switch(
  trackColor: MaterialStateProperty.all(Colors.black38),
  activeColor: Colors.green.withOpacity(0.4),
  inactiveThumbColor: Colors.red.withOpacity(0.4),
// when the switch is on, this image will be displayed
  activeThumbImage: const AssetImage('assets/happy_emoji.png'),
// when the switch is off, this image will be displayed
  inactiveThumbImage: const AssetImage('assets/sad_emoji.png'),
  value: forImage,
  onChanged: (value) => setState(() => forImage = value),
),

这就是代码在运行中的样子：

目前，我们不保存开关小部件的状态； 我们只是在改变它。 接下来是创建一个小应用程序，我们将在其中将主题从浅色更改为深色，反之亦然，当您关闭应用程序时，它的状态将被保存。

它是一个简单的单页应用程序，在 appBar，这将改变主题。

我已经使用 Flutter Hive 来保存应用程