Flutter – CheckboxListTile

CheckboxListTile是flutter的内置小部件。我们可以说它是CheckBox和ListTile的组合。它的属性如value 、 activeColor 、 和checkColor类似于CheckBox小部件，而title 、 subtitle 、 contentPadding等类似于ListTile小部件。我们可以点击 CheckBoxListTile 上的任意位置来搜索复选框。下面我们将看到这个小部件的所有属性以及一个例子。

CheckboxListTile 类的构造函数：

const CheckboxListTile(
{Key key,
@required bool value,
@required ValueChanged onChanged,
Color activeColor,
Color checkColor,
Widget title,
Widget subtitle,
bool isThreeLine: false,
bool dense,
Widget secondary,
bool selected: false,
ListTileControlAffinity controlAffinity: ListTileControlAffinity.platform,
bool autofocus: false,
EdgeInsetsGeometry contentPadding,
bool tristate: false}
)

CheckboxListTile 小部件的属性：

• activeColor：此小部件将Color类作为对象，在复选框被选中时为其分配颜色。
• autofocus：这个属性接受一个布尔值作为划分是否在初始焦点上选择小部件的值。
• checkColor：此属性通过将Color类作为对象来为复选图标分配颜色。
• contentPadding：该属性负责通过将EdgeIsetsGeometry类作为对象来分配小部件内部的空白空间。
• controlAffinity： controlAffinity属性将 ListTileControlAffinity 类作为对象来决定操作相对于小部件内文本的位置。
• 密集：密集属性接受一个布尔值作为对象是否与垂直密集列表相关联。
• isThreeLine：这个属性还接受一个布尔值作为对象来决定小部件中的文本是否会打印到第三行。
• onChanged：该属性以Valuechanged作为对象。此属性负责复选框中的更改。
• secondary： secondary属性将一个小部件作为要显示在复选框另一侧的对象。
• selected：这个属性接受一个布尔值作为对象来决定复选框是否已经被选中。
• 字幕：子平铺 属性将一个小部件作为要显示在标题下方的对象。通常，这个小部件是Text 。
• title：该属性还接收一个widget作为对象显示为CheckBoxListTle的标题，通常是Text widget。
• 三态：这个属性持有一个布尔值作为对象。如果它设置为 true 复选框中的值可以是true 、 false 、 或null 。
• value：该属性还接受一个布尔值作为对象来控制是否选中复选框。

示例 1：

Dart

import 'package:flutter/material.dart';
  
// importing material design libraryy
void main() {
  runApp(MaterialApp(
      
    // runApp method
    home: HomePage(),
  )); //MaterialApp
}
  
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
  
  // value set to false
  bool _value = false;
  
  // App widget tree
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IcoButton
        ), //AppBar
        body: SizedBox(
          width: 400,
          height: 400,
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.greenAccent),
                  borderRadius: BorderRadius.circular(20),
                ), //BoxDecoration
                  
                /** CheckboxListTile Widget **/
                child: CheckboxListTile(
                  title: const Text('GeeksforGeeks'),
                  subtitle: const Text('A computer science portal for geeks.'),
                  secondary: const Icon(Icons.code),
                  autofocus: false,
                  activeColor: Colors.green,
                  checkColor: Colors.white,
                  selected: _value,
                  value: _value,
                  onChanged: (bool value) {
                    setState(() {
                      _value = value;
                    });
                  },
                ), //CheckboxListTile
              ), //Container
            ), //Padding
          ), //Center
        ), //SizedBox
      ), //Scaffold
    ); //MaterialApp
  }
}

输出：

说明：在这个flutter应用程序的主体中，直到CheckBoxListTile的层次结构是SizedBox > Center > Padding > Container > CheckBoxListTile 。 CheckBoxListTile上方的所有小部件主要是将其放置在屏幕中央。在CheckBoxListTile小部件或title 中，属性是持有Text(‘GeeksforGeeks’)，副标题也是一个Text小部件。在最左边，我们有复选框，在最右边，我们有一个材料设计代码图标。小部件中的活动颜色为绿色，勾选图标颜色为白色。该小部件的状态由value属性控制。绿色边框由 BoxDecoration 小部件绘制，边缘有 20 像素的曲线。所有这些的组合结果是一个漂亮的复选框磁贴，它可以用于许多应用程序，如待办事项列表或调度程序应用程序。

示例 2：

Dart

import 'package:flutter/material.dart';
  
// importing material design library
void main() {
  runApp(MaterialApp(
      
    // runApp method
    home: HomePage(),
  )); //MaterialApp
}
  
// Creating a stateful widget to manage 
// the state of the app
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State {
    
  // value set to false
  bool _value = false;
  bool _valu = false;
    
  
  // App widget tree
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IcoButton
        ), //AppBar
        body: Center(
          child: SizedBox(
            width: 400,
            height: 400,
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.greenAccent),
                        borderRadius: BorderRadius.circular(20),
                      ), //BoxDecoration
                        
                      /** CheckboxListTile Widget **/
                      child: CheckboxListTile(
                        title: const Text('GeeksforGeeks'),
                        subtitle:
                            const Text('A computer science portal for geeks. '),
                        secondary: CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                          radius: 20,
                        ),
                        autofocus: false,
                        activeColor: Colors.green,
                        checkColor: Colors.white,
                        selected: _value,
                        dense: true,
                        value: _value,
                        onChanged: (bool value) {
                          setState(() {
                            _value = value;
                          });
                        },
                      ), //CheckboxListTile
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black,
                            offset: const Offset(
                              3.0,
                              3.0,
                            ), //Offset
                            blurRadius: 10.0,
                            spreadRadius: 2.0,
                          ), //BoxShadow
                          BoxShadow(
                            color: Colors.white,
                            offset: const Offset(0.0, 0.0),
                            blurRadius: 0.0,
                            spreadRadius: 0.0,
                          ), //BoxShadow
                        ],
                      ), //BoxDecoration
                        
                      /** CheckboxListTile Widget **/
                      child: CheckboxListTile(
                        title: const Text('GeeksforGeeks'),
                        subtitle: const Text(
                            'A computer science portal for geeks. Here you will find articles on all the technologies.'),
                        secondary: CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                          radius: 20,
                        ),
                        autofocus: false,
                        isThreeLine: true,
                        activeColor: Colors.green,
                        checkColor: Colors.white,
                        selected: _valu,
                        value: _valu,
                        onChanged: (bool value) {
                          setState(() {
                            _valu = value;
                          });
                        },
                      ), //CheckboxListTile
                    ),
                  ],
                ), //Container
              ), //Padding
            ), //Center
          ),
        ), //SizedBox
      ),
      debugShowCheckedModeBanner: false, //Scaffold
    ); //MaterialApp
  }
}

输出：

说明：在这个显示CheckBoxTile小部件使用的示例中，我们通过使用其不同参数以及BoxDecoration小部件修改了CheckBoxTile的外观。通过查看应用程序，我们可以注意到图像已替换了该代码图标。在CheckBoxTiles 中，次要参数采用CircleAvatar 小部件作为正在接受NetworkImage的对象。图像的大小为 20 像素。在第一个tile 中， dense属性也设置为 true，这使得 tile 与原始大小相比较小。两个 tile ，由高度为 30 px 的SizedBox小部件分隔。在第二个图块中，边框参数从BoxDecoration 中移除 并且添加了boxShadow ，它在边缘提供了一个漂亮的黑色阴影。此外， isThreeLine属性也设置为 true ，这为tile增加了一些高度，以在字幕参数中容纳更多文本。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！