Flutter单选开关和复选框

封面图 • 2025-10-26 • Flutter

在 Flutter 中，`Switch`（单选开关）和 `Checkbox`（复选框）是两种常用的交互控件，用于让用户进行选择。它们分别适用于不同的场景：

---

## 一、`Switch`（单选开关）

### 1. **用途**
- 表示一个**二选一**的选项（开启/关闭）。
- 通常用于切换功能状态（如：启用/禁用某个功能）。

### 2. **代码示例**

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Switch 示例')),
        body: SwitchExample(),
      ),
    );
  }
}

class SwitchExample extends StatefulWidget {
  @override
  _SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool _isSwitched = false;

@override
  Widget build(BuildContext context) {
    return Center(
      child: Switch(
        value: _isSwitched,
        onChanged: (value) {
          setState(() {
            _isSwitched = value;
          });
        },
      ),
    );
  }
}
```

### 3. **属性说明**
- `value`: 当前的状态（true 或 false）。
- `onChanged`: 当用户点击开关时触发的回调函数。

---

## 二、`Checkbox`（复选框）

### 1. **用途**
- 表示一个**多选**的选项（可以选或不选）。
- 适用于需要多个选项同时选择的情况（如：兴趣爱好、权限设置等）。

### 2. **代码示例**

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Checkbox 示例')),
        body: CheckboxExample(),
      ),
    );
  }
}

class CheckboxExample extends StatefulWidget {
  @override
  _CheckboxExampleState createState() => _CheckboxExampleState();
}

class _CheckboxExampleState extends State<CheckboxExample> {
  bool _isChecked = false;

@override
  Widget build(BuildContext context) {
    return Center(
      child: Checkbox(
        value: _isChecked,
        onChanged: (value) {
          setState(() {
            _isChecked = value!;
          });
        },
      ),
    );
  }
}
```

### 3. **属性说明**
- `value`: 当前是否被选中（true 或 false）。
- `onChanged`: 用户点击复选框时触发的回调函数。

---

## 三、`Switch` vs `Checkbox`

| 特性         | `Switch`                   | `Checkbox`                  |
|--------------|----------------------------|-----------------------------|
| 外观         | 圆形滑块（类似开关）       | 方形带对勾的框              |
| 用途         | 开关式选择（开/关）        | 多选（选/不选）             |
| 是否支持文字 | 可以通过 `Text` 包裹使用   | 通常与 `Text` 一起使用       |
| 状态数量     | 二选一（true/false）       | 二选一（true/false）        |

---

## 四、结合文本使用

你可以将 `Switch` 或 `Checkbox` 与 `Text` 结合使用，形成更友好的 UI。

### 示例：Switch + Text

```dart
Row(
  children: [
    Text('开启通知'),
    Switch(
      value: _isSwitched,
      onChanged: (value) {
        setState(() {
          _isSwitched = value;
        });
      },
    ),
  ],
)
```

### 示例：Checkbox + Text

```dart
Row(
  children: [
    Checkbox(
      value: _isChecked,
      onChanged: (value) {
        setState(() {
          _isChecked = value!;
        });
      },
    ),
    Text('我同意条款'),
  ],
)
```

---

## 五、自定义样式（可选）

你可以通过 `MaterialStateProperty` 自定义颜色、形状等：

```dart
Switch(
  value: _isSwitched,
  onChanged: (value) {
    setState(() {
      _isSwitched = value;
    });
  },
  activeColor: Colors.blue, // 开启时的颜色
  activeTrackColor: Colors.lightBlue, // 开启时的轨道颜色
),
```

---

如果你有更具体的使用场景或想要实现的效果（比如列表中的多选、动态控制等），欢迎继续提问！