首页 > 其他分享 >一统天下 flutter - widget 选择类: Checkbox - 复选框

一统天下 flutter - widget 选择类: Checkbox - 复选框

时间:2023-03-22 10:56:24浏览次数:47  
标签:widget Checkbox return value 复选框 Colors flutter

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 选择类: Checkbox - 复选框

示例如下:

lib\widget\selection\checkbox.dart

/*
 * Checkbox - 复选框
 *
 * 注:Checkbox 必须放到一个 Material 组件内,否则会报错
 */

import 'package:flutter/material.dart';

class CheckboxDemo extends StatefulWidget {
  const CheckboxDemo({Key? key}) : super(key: key);

  @override
  _CheckboxDemoState createState() => _CheckboxDemoState();
}

class _CheckboxDemoState extends State<CheckboxDemo> {

  bool? _checkbox1IsChecked;
  bool _checkbox2IsChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
            /// 当前复选框的选中状态
            /// 如果 tristate 为 true 则复选框有 3 种状态,分别是 null, false, true
            /// 如果 tristate 为 false 则复选框有 2 种状态,分别是 false, true
            value: _checkbox1IsChecked,
            tristate: true,
            /// 当前复选框的选中状态发生变化时触发的事件
            ///   value - 变化后的状态
            onChanged: (bool? value) {
              setState(() {
                _checkbox1IsChecked = value;
              });
            },
            /// 复选框内的“对钩”或“横线”的颜色
            checkColor: Colors.white,
            /// 为不同的状态设置不同的颜色
            fillColor: MaterialStateProperty.resolveWith((states) {
              if (states.contains(MaterialState.selected)) {
                return Colors.green;  /// 选中状态为绿色
              }
              return Colors.red;      /// 其他状态为红色
            }),
            /// 边框
            shape: const StadiumBorder(),
          ),
          Checkbox(
            tristate: false,
            value: _checkbox2IsChecked,
            onChanged: (bool? value) {
              setState(() {
                _checkbox2IsChecked = value!;
              });
            },
            checkColor: Colors.white,
            fillColor: MaterialStateProperty.resolveWith((states) {
              if (states.contains(MaterialState.selected)) {
                return Colors.green;
              }
              return Colors.red;
            }),
          ),
        ],
      ),
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,Checkbox,return,value,复选框,Colors,flutter
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_selection_checkbox.html

相关文章