Flutter CheckBox


简介

checkbox “复选框”

  • 复选框本身不保持任何状态;
  • 当复选框的状态发生变化时,窗口小部件会调用onChanged回调;
  • 大多数使用复选框的小部件将侦听onChanged回调,并使用新值重建复选框以更新复选框的可视外观;""";

基本用法

下面示例展示多个颜色(随机)样式的 checkbox

  • 一个多选的 checkbox;

进阶用法

下面示例展示多个颜色(随机)样式的 checkbox

  • 一个单选 checkbox 操作;

实例演示

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

/*
* Checkbox 默认的实例
* index 当前checkbox 的索引值
*/
class CheckboxDefault extends StatefulWidget{
  final int index;
  final parent;
  const CheckboxDefault([this.parent, this.index = -1]) : super();
  @override
  State<StatefulWidget> createState() =>_CheckboxDefault();
}
class _CheckboxDefault extends State {
  bool isChecked=false;
  Color color = _randomColor(); // 注意和下面的 StatelessWidget 里的 _randomColor 区别
  @override
  Widget build(BuildContext context) {
    return Checkbox(
        activeColor: color,
        tristate:false,
        value: isChecked,
        onChanged: (bool bol) {
          if(mounted) {
            setState(() {
              isChecked = bol;
            });
          }
        }
    );
  }
}

/*
* Checkbox 默认的实例
* index 当前checkbox 的索引值
*/
class CheckboxSelect extends StatelessWidget {
  final int index;
  final widget;
  final parent;

  const CheckboxSelect([this.widget,this.parent, this.index = -1])
      : super();

  @override
  Widget build(BuildContext context) {
    Color color = _randomColor();
    return Checkbox(
        activeColor: color,
        tristate:false,
        value: parent.selectValue == this.index,
        onChanged: (bool bol) {
          if(parent.mounted) {
            parent.setState(() {
              parent.selectValue = bol ? this.index : -1;
            });
          }
        }
    );
  }
}

Color _randomColor() {
  var red = Random.secure().nextInt(255);
  var greed = Random.secure().nextInt(255);
  var blue = Random.secure().nextInt(255);
  return Color.fromARGB(255, red, greed, blue);
}