Flutter中Checkbox的使用方法

這篇文章主要介紹“Flutter中Checkbox的使用方法”，在日常操作中，相信很多人在Flutter中Checkbox的使用方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Flutter中Checkbox的使用方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

1. Checkbox

多選按鈕，一般用來表現(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,
                    ),
                ],
            )
        );
    }
}

效果圖如下：

到此，關(guān)于“Flutter中Checkbox的使用方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！