关注我们

Flutter - Checkbox

复选框(Checkbox)是一种包含布尔值的输入组件，允许用户从多个选项中选择多个选项。

在本文中，无涯教程将学习如何在Flutter中使用复选框。这些复选框的详细说明如下:

CheckBox:

属性	描述
value	复选框的值。
onChanged	更改值时将被调用。
Tristate	默认情况下为false。其值也可以是true，false或null。
activeColor	指定了所选复选框的颜色。
checkColor	当选中icon时
materialTapTargetSize	它用于配置点击目标的大小。

以下是复选框的演示示例:

复制代码

Checkbox(  
  value: this.showvalue,   
  onChanged: (bool value) {  
    setState(() {  
      this.showvalue = value;   
    });  
  },  
),

让无涯教程编写完整的代码，以查看复选框在Flutter中的显示方式。首先在android studio中创建一个项目，打开main.dart文件，然后替换下面的代码:

无涯教程网

复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp( home: MyHomePage(),));
}

class MyHomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<MyHomePage> {
  bool valuefirst = false;
  bool valuesecond = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Checkbox Example'),),
        body: Container(

            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    SizedBox(width: 10,),
                    Text('Checkbox without Header and Subtitle: ',style: TextStyle(fontSize: 17.0), ),
                    Checkbox(
                      checkColor: Colors.greenAccent,
                      activeColor: Colors.red,
                      value: this.valuefirst,
                      onChanged: (bool value) {
                        setState(() {
                          this.valuefirst = value;
                        });
                      },
                    ),
                    Checkbox(
                      value: this.valuesecond,
                      onChanged: (bool value) {
                        setState(() {
                          this.valuesecond = value;
                        });
                      },
                    ),
                  ],
                ),
              ],
            )
        ),
      ),
    );
  }
}

现在在模拟器或设备中执行应用程序，无涯教程将看到以下屏幕:

CheckboxListTitle:

属性	描述
value	使用复选框是否被选中。
onchanged	将在更改值时调用。
title	它指定了列表的主要标题。
subtitle	它指定了列表子标题，用于添加描述。
activeColor	它指定了所选复选框的颜色。
selected	是否选中状态，默认false。
secondary	显示在复选框前面。

以下是CheckboxListTitle的演示示例:

复制代码

CheckboxListTile(
  secondary: const Icon(Icons.abc),
  title: const Text('demo mode'),
     subtitle: Text('sub demo mode'),
  value: this.subvalue, 
  onChanged: (bool value) {
    setState(() {
      this.subvalue = value; 
    });
  },
),

让无涯教程编写完整的代码，看看如何在Flutter中显示CheckBoxListTitle。首先，在Android Studio中创建一个项目，打开 main.dart 文件，并替换下面给出的代码:

复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp( home: MyHomePage(),));
}

class MyHomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<MyHomePage> {
  bool valuefirst = false;
  bool valuesecond = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Checkbox Example'),),
        body: Container(
            padding: new EdgeInsets.all(22.0),
            child: Column(
              children: <Widget>[
                SizedBox(width: 10,),
                Text('Checkbox with Header and Subtitle',style: TextStyle(fontSize: 20.0), ),
                CheckboxListTile(
                  secondary: const Icon(Icons.alarm),
                  title: const Text('Ringing at 4:30 AM every day'),
                  subtitle: Text('Ringing after 12 hours'),
                  value: this.valuefirst,
                  onChanged: (bool value) {
                    setState(() {
                      this.valuefirst = value;
                    });
                  },
                ),
                CheckboxListTile(
                  controlAffinity: ListTileControlAffinity.trailing,
                  secondary: const Icon(Icons.alarm),
                  title: const Text('Ringing at 5:00 AM every day'),
                  subtitle: Text('Ringing after 12 hours'),
                  value: this.valuesecond,
                  onChanged: (bool value) {
                    setState(() {
                      this.valuesecond = value;
                    });
                  },
                ),
              ],
            )
        ),
      ),
    );
  }
}