Flutter多选按钮组件Checkbox使用方法详解

Flutter 中的多选按钮组件有两种,供大家参考,具体内容如下

1. Checkbox

多选按钮,一般用来表现一些简单的信息。

常用属性如下:

(1). value  多选的值;

(2). onChanged 选择改变触发的事件;

(3). activeColor 选中时的颜色;

(4). checkColor 选中后对号的颜色;

2. CheckboxListTile

包含更多信息的多选项,提供多种配置信息的属性,可以表现更丰富的信息。

常用的属性如下:

(1). value  多选的值;

(2). onChanged 选择改变触发的事件;

(3). activeColor 选中时的颜色;

(4). title 标题;

(5). subtitle 副标题;

(6). secondary 次要的;

(7). activeColor 选中时的颜色;

(8). checkColor 选中后对号的颜色;

(9). selected 选中的时候文字颜色是否跟着改变;

3. 代码示例

import 'package:flutter/material.dart';

class CheckBoxPage extends StatefulWidget {
    CheckBoxPage({Key key}) : super(key: key);
    @override
    _CheckBoxPageState createState() => _CheckBoxPageState();
}

class _CheckBoxPageState extends State<CheckBoxPage> {

    var status = true;
    var flag = true;
    var check = true;

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar:AppBar(
                title: Text("多选框"),
            ),
            body:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children:<Widget>[ 

                    Row(
                        children:<Widget>[
                            // 选中框
                            Checkbox(
                                value:this.status,
                                // 改变后的事件
                                onChanged:(value){
                                    setState(() {
                                       this.status = value;
                                    });
                                },
                                // 选中后的颜色
                                activeColor: Colors.red,
                                // 选中后对号的颜色
                                checkColor: Colors.blue,
                            ),
                            Text(this.status?"选中":"取消")
                        ],
                    ),

                    SizedBox(height:10),
                    // 带标题的选中框
                    CheckboxListTile(
                        value:this.flag,
                        // 改变后的事件
                        onChanged:(value){
                            setState(() {
                                this.flag = value;
                            });
                        },
                        title:Text("标题"),
                        subtitle: Text("这是副标题"),
                        // 选中后的颜色
                        activeColor: Colors.red,
                        // 选中的文字是否跟着高亮
                        selected: this.flag,
                        // 选中后对号的颜色
                        checkColor: Colors.blue,
                    ),

                    SizedBox(height:10),
                    // 带图标和标题的选中框
                    CheckboxListTile(
                        value:this.check,
                        onChanged:(value){
                            setState(() {
                                this.check = value;
                            });
                        },
                        title:Text("标题"),
                        subtitle: Text("这是副标题"),
                        secondary: Icon(Icons.help),
                        activeColor: Colors.red,
                        selected: this.check,
                        checkColor: Colors.blue,
                    ),
                ],
            )
        );
    }
}

效果图如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Flutter实现文本组件、图标及按钮组件的代码

    •文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认值 说明 data String   要显示的文本 maxLines int 0 文本要显示的最大行数 style TextStyle null 文本样式,可定义文本的字体大小.颜色.粗细等 textAlign TextAlign TextAlign.center 文本水平方向的对齐方式,取值有center.end.justify.left.right.start.val

  • Flutter多选按钮组件Checkbox使用方法详解

    Flutter 中的多选按钮组件有两种,供大家参考,具体内容如下 1. Checkbox 多选按钮,一般用来表现一些简单的信息. 常用属性如下: (1). value  多选的值: (2). onChanged 选择改变触发的事件: (3). activeColor 选中时的颜色: (4). checkColor 选中后对号的颜色: 2. CheckboxListTile 包含更多信息的多选项,提供多种配置信息的属性,可以表现更丰富的信息. 常用的属性如下: (1). value  多选的值:

  • Vue3内置组件Teleport使用方法详解

    目录 1.Teleport用法 2.完成模态对话框组件 3.组件的渲染 前言: Vue 3.0 新增了一个内置组件 teleport ,主要是为了解决以下场景: 有时组件模板的一部分逻辑上属于该组件,而从技术角度来看,最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置 场景举例:一个 Button ,点击后呼出模态对话框 这个模态对话框的业务逻辑位置肯定是属于这个 Button ,但是按照 DOM 结构来看,模态对话框的实际位置应该在整个应用的中间 这样就有了一个问题:组件的

  • Android中CheckBox复选框控件使用方法详解

    CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过Linea

  • VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • Android中ToggleButton开关状态按钮控件使用方法详解

    ToggleButton开关状态按钮控件使用方法,具体内容如下 一.简介 1. 2.ToggleButton类结构 父类是CompoundButton,引包的时候注意下 二.ToggleButton开关状态按钮控件使用方法 1.新建ToggleButton控件及对象 private ToggleButton toggleButton1; toggleButton1=(ToggleButton) findViewById(R.id.toggleButton1); 2.设置setOnCheckedC

  • Flutter 首页必用组件NestedScrollView的示例详解

    昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能.修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本,建议慎重,有些人升级后项目无法运行. 今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件. 可以在其内部嵌套其他滚动视图的滚动视图,其滚动位置是固有链接的. 在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,

  • Android 组件样式定制方法详解

    前言 android中有很多现成的组件可以使用,但是android上面的程序很多时候用系统自带的组件都不太合适,主要是样式可能不是我们想要的.这个时候我们就需要定制一些样式.本文将讲解如何修改组件的样式. 1.默认样式. 在修改组件的样式之前,我们还是先了解一下组件默认的样式,如下: 当然还有很多的组件,这里就简单的列举一下就可以了.从上面的默认组件可以看出这些组件的样式和你的app的风格不一致.那么这个时候你可能需要做的就是更改组件的样式.(本人觉得默认样式基本上都比较丑,基本上每个app中都

  • Delphi菜单组件TMainMenu使用方法详解

    本文为大家分享了菜单组件TMainMenud的使用方法,供大家参考,具体内容如下 菜单组件TMainMenu 创建菜单双击TmenuMain,单击Caption就可以添加一个菜单项 菜单中添加分割线只需加"-"就可以添加一个分割线 级联菜单的设计 单击鼠标右键弹出菜单中选择Create Submenu菜单项 单选功能设计 要在设计的菜单项目中选择RadioItem属性为True,Checked属性为True 复选功能的设计 在设计菜单项目中选择RadioItem属性为False,Che

  • vue之ele多级联组件的使用方法详解

    本文实例为大家分享了vue之ele多级联组件的使用具体代码,供大家参考,具体内容如下 多级联组件的使用 html <el-cascader         ref="cascader"         :options="options"         @focus="cascaderFocus"         @change="cascaderChange"         v-model="cascad

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

随机推荐