Flutter多選按鈕組件Checkbox使用方法詳解

更新時(shí)間：2021年09月08日 10:45:56 作者：aiguangyuan

這篇文章主要為大家詳細(xì)介紹了Flutter多選按鈕組件Checkbox使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Flutter 中的多選按鈕組件有兩種，供大家參考，具體內(nèi)容如下

1. Checkbox

多選按鈕，一般用來(lái)表現(xiàn)一些簡(jiǎn)單的信息。

常用屬性如下：

(1). value 多選的值；

(2). onChanged 選擇改變觸發(fā)的事件；

(3). activeColor 選中時(shí)的顏色；

(4). checkColor 選中后對(duì)號(hào)的顏色；

2. CheckboxListTile

包含更多信息的多選項(xiàng)，提供多種配置信息的屬性，可以表現(xiàn)更豐富的信息。

常用的屬性如下：

(1). value 多選的值；

(2). onChanged 選擇改變觸發(fā)的事件；

(3). activeColor 選中時(shí)的顏色；

(4). title 標(biāo)題；

(5). subtitle 副標(biāo)題；

(6). secondary 次要的；

(7). activeColor 選中時(shí)的顏色；

(8). checkColor 選中后對(duì)號(hào)的顏色；

(9). selected 選中的時(shí)候文字顏色是否跟著改變；

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,
                                // 選中后對(duì)號(hào)的顏色
                                checkColor: Colors.blue,
                            ),
                            Text(this.status?"選中":"取消")
                        ],
                    ),
 
                    SizedBox(height:10),
                    // 帶標(biāo)題的選中框
                    CheckboxListTile(
                        value:this.flag,
                        // 改變后的事件
                        onChanged:(value){
                            setState(() {
                                this.flag = value;
                            });
                        },
                        title:Text("標(biāo)題"),
                        subtitle: Text("這是副標(biāo)題"),
                        // 選中后的顏色
                        activeColor: Colors.red,
                        // 選中的文字是否跟著高亮
                        selected: this.flag,
                        // 選中后對(duì)號(hào)的顏色
                        checkColor: Colors.blue,
                    ),
 
                    SizedBox(height:10),
                    // 帶圖標(biāo)和標(biāo)題的選中框
                    CheckboxListTile(
                        value:this.check,
                        onChanged:(value){
                            setState(() {
                                this.check = value;
                            });
                        },
                        title:Text("標(biāo)題"),
                        subtitle: Text("這是副標(biāo)題"),
                        secondary: Icon(Icons.help),
                        activeColor: Colors.red,
                        selected: this.check,
                        checkColor: Colors.blue,
                    ),
                ],
            )
        );
    }
}

效果圖如下：