Flutter 复选框

2025年3月17日 | 阅读 3 分钟

复选框是一种持有布尔值的输入组件。它是一个 GUI 元素，允许用户从多个选项中选择多个选项。在这里，用户只能回答“是”或“否”的值。一个已标记/已选中的复选框表示“是”，而一个未标记/未选中的复选框表示“否”值。通常，我们可以在屏幕上看到复选框，它们是带有空白或打勾标记的方框。对应于每个复选框的标签或标题描述了复选框的含义。

在本文中，我们将学习如何在 Flutter 中使用复选框。在 Flutter 中，我们可以有两种类型的复选框：名为 “复选框” 的复选框的紧凑版本和带有标题和子标题的 “CheckboxListTile” 复选框。下面给出了这些复选框的详细说明

Checkbox

属性	描述
值	它用于判断复选框是否已选中。
onChanged	当值更改时，它将被调用。
Tristate	默认情况下为 false。它的值也可以是 true、false 或 null。
activeColor	它指定所选复选框的颜色。
checkColor	它指定选中复选框时勾号的颜色。
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

属性	描述
值	它用于判断复选框是否已选中。
onChanged	当值更改时，它将被调用。
titile	它指定列表的主标题。
subtitle	它指定列表的子标题。通常，它用于添加描述。
activeColor	它指定所选复选框的颜色。
activeColor	它指定所选复选框的颜色。
selected	默认情况下为 false。它在选择后突出显示文本。
次要	它是显示在复选框前面的小部件。

示例

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

输出

现在在模拟器或设备中执行该应用程序，我们将获得以下屏幕

下一主题Flutter 单选按钮

Flutter 复选框

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 复选框

相关帖子

Flutter 弹窗

Flutter 按钮

Flutter Stack

Flutter 开关

Flutter Toast

底部导航栏

Flutter Scaffold

Flutter Snackbar

Flutter 文本

Flutter 表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器