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

Posted on by

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

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

效果圖如下：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：