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

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

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

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

1. Checkbox

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

常用屬性如下：

(1). value 多選的值；

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

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

(4). checkColor 選中后對號的顏色；

2. CheckboxListTile

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

常用的屬性如下：

(1). value 多選的值；

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

(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,
                    ),
                ],
            )
        );
    }
}

效果圖如下：