feat: Checkbox

Author: DIVINER-only

docs/widget/form/checkbox/index.md

@@ -1 +1,26 @@
-## **CheckBox**
+## **CheckBox**
+
+>
+复选框
+* 复选框本身不保持任何状态
+* 当复选框的状态发生变化时，窗口小部件会调用onChanged回调
+* 大多数使用复选框的小部件将侦听onChanged回调并使用新值重建复选框以更新复选框的可视外观
+
+### 构造方法
+``` dart
+Checkbox({
+  Key key,
+  @required this.value,
+  this.tristate = false,
+  @required this.onChanged,
+  this.activeColor,
+  this.materialTapTargetSize,
+})
+```
+
+### 属性介绍
+* value: 复选框的状态
+* tristate: 当tristate为true，则复选框可以选择显示三个值 - true，false和null，当value为null时，将显示破折号。默认情况下， tristate为false，复选框的值必须为true或false
+* onChanged: 点击复选框的回调函数
+* activeColor: 选中此复选框时要使用的颜色
+* materialTapTargetSize: 配置点击目标的最小尺寸

lib/widget/form/checkbox/demo.dart

@@ -1,50 +1,41 @@
 import 'package:flutter/material.dart';
+import 'dart:math';
 
 class Index extends StatefulWidget {
   @override
   _IndexState createState() => _IndexState();
 }
 
 class _IndexState extends State<Index> {
-  bool _checkBoxValue = false;
-
+  List<bool> checkBoxValue = [false, true, true, false, true];
   @override
   Widget build(BuildContext context) {
-    return ListView(
-      children: <Widget>[
-        Center(
-          child: Checkbox(
-            value: _checkBoxValue,
-            onChanged: (value) {
-              setState(() {
-                _checkBoxValue = value;
-              });
-            },
-          ),
-        )
-      ],
+    return Scaffold(
+      appBar: AppBar(title: Text('Checkbox'),),
+      body: Center(
+        child: Wrap(
+          children: List.generate(5, (index) {
+            Color color = _randomColor();
+            return Checkbox(
+              value: checkBoxValue[index],
+              activeColor: color,
+              tristate: false,
+              onChanged: (value) {
+                setState(() {
+                  checkBoxValue[index] = value;
+                });
+              },
+            );
+          }),
+        ),
+      ),
     );
   }
 }
 
-
-// class CheckBoxDemo extends StatefulWidget {
-//   @override
-//   _CheckBoxDemoState createState() => _CheckBoxDemoState();
-// }
-
-// class _CheckBoxDemoState extends State<CheckBoxDemo> {
-//   bool _checkBoxValue;
-//   // _CheckBoxDemoState({Key key, this._checkBoxValue}):super(key: key);
-//   @override
-//   Widget build(BuildContext context) {
-//     return Checkbox(
-//       value: _checkBoxValue,
-//       onChanged: (value) {
-//         setState(() {
-//           _checkBoxValue = value;
-//         });
-//       },
-//     );
-//   }
-// }
+Color _randomColor () {
+  var red = Random.secure().nextInt(255);
+  var green = Random.secure().nextInt(255);
+  var blue = Random.secure().nextInt(255);
+  return Color.fromARGB(255, red, green, blue);
+}