Flutter基础Widget使用----动画图解Switch和Checkbox

Switch 和 Checkbox 分别代表开关按钮和复选框。这在 Android 开发中也是常用的控件。

一、Switch

创建 material 设计风格开关。Switch 非常简单，只有两种状态，要么开要么关。它继承自 StatefulWidget 。

Switch 本身不保持任何状态。 相反，当 Switch 的状态更改时，Widget 将调用 [onChanged] 回调。 大多数使用 Switch 的 Widget 将监听 [onChanged] 回调，并使用新的 [value] 重建 Switch 以更新 Switch 的外观。

以下参数是必须的：

value ---- 确定此 Switch 是打开还是关闭。

onChanged ---- 当用户打开或关闭 Switch 时，将调用 [onChanged]。

  const Switch({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.activeTrackColor,
    this.inactiveThumbColor,
    this.inactiveTrackColor,
    this.activeThumbImage,
    this.inactiveThumbImage,
    this.materialTapTargetSize,
    this.dragStartBehavior = DragStartBehavior.start,
  })

activeColor ---- 激活颜色，也就是此开关打开时使用的颜色。

activeTrackColor ---- 开关打开时在轨道上使用的颜色。默认为 [ThemeData.toggleableActiveColor]，不透明度设置为50％。

inactiveThumbColor ---- 关闭此开关时在 Thumb （圆巴巴）上使用的颜色。

inactiveTrackColor ---- 关闭此开关时在轨道上使用的颜色。默认为 material 设计规范中描述的颜色。

activeThumbImage ---- 开关打开时在此开关的 Thumb 上使用的图像。

inactiveThumbImage ---- 开关关闭时在此开关的 Thumb 上使用的图像。

materialTapTargetSize ---- 配置点击目标的最小尺寸。

dragStartBehavior ---- 偏移的配置传递给 [DragStartDetails]。设置确定用户开始拖动时拖动何时正式开始。

enum DragStartBehavior {
  /// 在检测到第一个按下事件的位置设置初始偏移量。
  down,

  /// 将初始位置设置在检测到拖动开始事件的位置。
  start,
}

下面来定义一个按钮详细了解它的用法。我们创建了是个开关，第一个只是简单的使用；第二个自定义了按钮打开和关闭时的颜色（包括轨道颜色）；第三个自定义了打开时Thumb图像；第四个修改了dragStartBehavior。

class _MyHomePageState extends State<MyHomePage> {
  bool _switchSelected1 = true;
  bool _switchSelected2 = true;
  bool _switchSelected3 = true;
  bool _switchSelected4 = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected1,
                onChanged: (value) {
                  print("switch1 value = $value");
                  setState(() {
                    _switchSelected1 = value;
                  });
                },
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected2,
                onChanged: (value) {
                  print("switch2 value = $value");
                  setState(() {
                    _switchSelected2 = value;
                  });
                },
                activeColor: Colors.red,
                activeTrackColor: Colors.green,
                inactiveThumbColor: Colors.grey,
                inactiveTrackColor: Colors.blue,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected3,
                onChanged: (value) {
                  print("switch3 value = $value");
                  setState(() {
                    _switchSelected3 = value;
                  });
                },
                activeThumbImage: AssetImage("images/image.jpg"),
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected4,
                onChanged: (value) {
                  print("switch4 value = $value");
                  setState(() {
                    _switchSelected4 = value;
                  });
                },
                dragStartBehavior: DragStartBehavior.down,
              ),
            ]),
          ],
        ));
  }
}

下面是操作后的log。

I/flutter ( 3390): switch1 value = false
I/flutter ( 3390): switch1 value = true
I/flutter ( 3390): switch1 value = false
I/flutter ( 3390): switch2 value = false
I/flutter ( 3390): switch2 value = true
I/flutter ( 3390): switch2 value = false
I/flutter ( 3390): switch2 value = true
I/flutter ( 3390): switch3 value = false
I/flutter ( 3390): switch3 value = true
I/flutter ( 3390): switch3 value = false
I/flutter ( 3390): switch3 value = true
I/flutter ( 3390): switch4 value = false
I/flutter ( 3390): switch4 value = true
I/flutter ( 3390): switch4 value = false
I/flutter ( 3390): switch4 value = true

二、Checkbox

复选框，多个选项可以勾选的时候非常有用，多选题实现多个答案选中就需要用到复选框。

和 Switch Widget 类似，两个 Field 是必须的。

value ---- 它确定是否选中该复选框。 如果 [tristate] 为 true，则 [value] 只能为 null。

onChanged ---- 当复选框的值更改时调用。可以将其设置为 null 以禁用该复选框。

  const Checkbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.materialTapTargetSize,
  })

tristate ---- 如果为true，则复选框的 [value] 可以为 true，false 或 null。如果复选框的值为空，则显示一个破折号。

activeColor ---- 选中此复选框时使用的颜色。

checkColor ---- 选中此复选框时用于选中图标的颜色。

下面定义了两个Checkbox，第一个设置了 activeColor 和 checkColor；第二个设置 tristate 为 true 时的效果。

            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Checkbox(
                value: _checkboxSelected1,
                onChanged: (value) {
                  print("checkbox1 value = $value");
                  setState(() {
                    _checkboxSelected1 = value;
                  });
                },
                activeColor: Colors.red,
                checkColor: Colors.green,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Checkbox(
                value: _checkboxSelected2,
                onChanged: (value) {
                  print("checkbox2 value = $value");
                  setState(() {
                    _checkboxSelected2 = value;
                  });
                },
                tristate: true,
              ),
            ]),

这是对应的操作log。

03-09 02:47:58.820 3390-3404/com.example.flutter_app I/flutter: checkbox1 value = false
03-09 02:48:00.682 3390-3404/com.example.flutter_app I/flutter: checkbox1 value = true
03-09 02:48:02.675 3390-3404/com.example.flutter_app I/flutter: checkbox1 value = false
03-09 02:48:05.842 3390-3404/com.example.flutter_app I/flutter: checkbox2 value = null
03-09 02:48:08.442 3390-3404/com.example.flutter_app I/flutter: checkbox2 value = false
03-09 02:48:09.980 3390-3404/com.example.flutter_app I/flutter: checkbox2 value = true
03-09 02:48:11.026 3390-3404/com.example.flutter_app I/flutter: checkbox2 value = null
03-09 02:48:11.982 3390-3404/com.example.flutter_app I/flutter: checkbox2 value = false

最后是完整 Demo 的代码。

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _switchSelected1 = true;
  bool _switchSelected2 = true;
  bool _switchSelected3 = true;
  bool _switchSelected4 = true;

  bool _checkboxSelected1 = true;
  bool _checkboxSelected2 = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected1,
                onChanged: (value) {
                  print("switch1 value = $value");
                  setState(() {
                    _switchSelected1 = value;
                  });
                },
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected2,
                onChanged: (value) {
                  print("switch2 value = $value");
                  setState(() {
                    _switchSelected2 = value;
                  });
                },
                activeColor: Colors.red,
                activeTrackColor: Colors.green,
                inactiveThumbColor: Colors.grey,
                inactiveTrackColor: Colors.blue,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected3,
                onChanged: (value) {
                  print("switch3 value = $value");
                  setState(() {
                    _switchSelected3 = value;
                  });
                },
                activeThumbImage: AssetImage("images/image.jpg"),
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Switch(
                value: _switchSelected4,
                onChanged: (value) {
                  print("switch4 value = $value");
                  setState(() {
                    _switchSelected4 = value;
                  });
                },
                dragStartBehavior: DragStartBehavior.down,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Checkbox(
                value: _checkboxSelected1,
                onChanged: (value) {
                  print("checkbox1 value = $value");
                  setState(() {
                    _checkboxSelected1 = value;
                  });
                },
                activeColor: Colors.red,
                checkColor: Colors.green,
              ),
            ]),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              Checkbox(
                value: _checkboxSelected2,
                onChanged: (value) {
                  print("checkbox2 value = $value");
                  setState(() {
                    _checkboxSelected2 = value;
                  });
                },
                tristate: true,
              ),
            ]),
          ],
        ));
  }
}