欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2021年09月08日 10:45:56   作者:aiguangyuan  
這篇文章主要為大家詳細(xì)介紹了Flutter多選按鈕組件Checkbox使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

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

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

效果圖如下:

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論