前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter中的多选按钮组件Checkbox

Flutter中的多选按钮组件Checkbox

作者头像
越陌度阡
发布2021-01-05 14:12:38
3.6K0
发布2021-01-05 14:12:38
举报

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. 代码示例

代码语言:javascript
复制
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,
                    ),
                ],
            )
        );
    }
}

效果图如下:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/01/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. Checkbox
  • 2. CheckboxListTile
  • 3. 代码示例
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档