Flutter基础组件（8）：Switch（单选开关）
Switch组件是 Flutter 中用于二选一开关功能的核心控件，类似于 iOS 中的滑动开关和 Android 中的切换按钮。它通常用于让用户在两种状态之间切换，如开/关、是/否等。Switch是一个非常直观的控件，当用户需要快速启用或禁用某个功能时，它可以提供最直接的交互方式。
一、基本使用
Switch的使用非常简单，它只有两个主要属性——value和onChanged。其中，value定义了开关的当前状态，而onChanged则是当用户切换状态时触发的回调函数。
Switch(
value: isSwitched,
onChanged: (bool value) {
setState(() {
isSwitched = value;
});
},
)
在这个例子中，isSwitched是一个bool变量，决定了Switch是开还是关。onChanged是用户切换开关时执行的回调函数，它会更新isSwitched 的值。
二、属性
Switch组件提供了一些属性，用于控制其外观和行为。下表列出了常用的属性：
value：当前开关的状态，true表示开，false表示关。onChanged：当开关状态变化时调用的回调函数。该函数接收一个新的状态（true或false）。activeColor：开启状态时开关的颜色。inactiveThumbColor：关闭状态时滑块（拇指）的颜色。inactiveTrackColor：关闭状态时滑块轨道的颜色。activeThumbImage：开启状态时显示在滑块（拇指）上的图像。inactiveThumbImage：关闭状态时显示在滑块（拇指）上的图像。materialTapTargetSize：控制点击目标的大小。可设置为MaterialTapTargetSize.padded或MaterialTapTargetSize.shrinkWrap。
三、自定义Switch的颜色
可以使用activeColor、inactiveThumbColor和inactiveTrackColor属性自定义开关的颜色。当开关处于不同状态时，这些属性将改变其滑块和轨道的颜色。
Switch(
value: isSwitched,
onChanged: (bool value) {
setState(() {
isSwitched = value;
});
},
activeColor: Colors.green, // 开启状态时滑块的颜色
inactiveThumbColor: Colors.red, // 关闭状态时滑块的颜色
inactiveTrackColor: Colors.grey, // 关闭状态时轨道的颜色
)
在这个示例中，当开关处于关闭状态时，滑块为红色，轨道为灰色；当开关打开时，滑块变为绿色。
四、使用图像的 Switch
Switch允许你在滑块上显示图像，通过activeThumbImage和inactiveThumbImage属性来设置。可以使用ImageProvider，如AssetImage或NetworkImage，来加载图像。
Switch(
value: isSwitched,
onChanged: (bool value) {
setState(() {
isSwitched = value;
});
},
activeThumbImage: AssetImage('assets/active_image.png'), // 开启状态下的图像
inactiveThumbImage: AssetImage('assets/inactive_image.png'), // 关闭状态下的图像
)
当开关状态发生变化时，滑块会显示不同的图像，这可以为应用带来更加丰富的视觉效果。
五、示例
以下是一个完整的能够运行的 Flutter 单选开关的示例代码：
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(
debugShowCheckedModeBanner: false,
home: SwitchPage(),
));
}
class SwitchPage extends StatefulWidget {
const SwitchPage({super.key});
@override
State<SwitchPage> createState() => _SwitchPageState();
}
class _SwitchPageState extends State<SwitchPage> {
bool _isSwitched = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Switch Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Switch(
value: _isSwitched,
onChanged: (value) {
setState(() {
_isSwitched = value;
});
},
),
Text(
_isSwitched ? 'Switch is ON' : 'Switch is OFF',
style: const TextStyle(fontSize: 18.0),
),
],
),
),
);
}
}
在上面的示例中，我们创建了一个名为SwitchPage的有状态（stateful）小部件。该页面包含一个Switch组件和一个文本组件，用于显示开关的状态。开关的状态通过_isSwitched变量进行控制，并在状态改变时使用setState进行更新。效果图如下所示：
