Flutter – 复选框小部件

复选框在flutter是材料的设计部件。它始终用于有状态小部件，因为它不维护自己的状态。我们可以使用它的onChanged属性来交互或修改flutter应用程序中的其他小部件。与大多数其他flutter小部件一样，它还带有许多属性，如activeColor 、 checkColor 、 mouseCursor等，让开发人员可以完全控制小部件的外观和感觉。

复选框小部件的构造函数：

const Checkbox(
{Key key,
@required bool value,
bool tristate: false,
@required ValueChanged onChanged,
MouseCursor mouseCursor,
Color activeColor,
Color checkColor,
Color focusColor,
Color hoverColor,
MaterialTapTargetSize materialTapTargetSize,
VisualDensity visualDensity,
FocusNode focusNode,
bool autofocus: false}
)

复选框小部件的属性：

• activeColor：该属性以Color类为对象，在选中时填充ChechBox 。
• autofocus：这个属性接受一个布尔值作为对象。如果设置为 true，则CheckBox在初始焦点处被选中。
• checkColor：此属性也将 Color 类作为对象。它为复选图标分配颜色。
• focusColor：此属性还接受 Color 类作为对象，以便在复选框处于焦点时为其赋予颜色。
• focusNode：它设置一个额外的焦点节点来获取光标的焦点。它以FocusNode作为对象。
• hoverColor： hoverColor属性以 Color 类为对象。它控制悬停时复选框的颜色。
• materialTapTargetSize：控制点击区域的大小。它以MaterialTapTargetSize枚举作为对象。
• mouseCursor：这决定了指针事件发生时的光标类型。它将MouseCursor类作为对象。
• onChanged: ValueChanged typedef 是赋予此属性的对象。当CheckBox小部件中的值应更改时调用。
• 三态：通常复选框被选中或不选中。如果将布尔值作为对象的此属性设置为 true，则它也可以设置为 null。
• value：这个属性接受一个布尔值作为对象来判断CheckBox是否被选中。
• visualDensity：它通过将VisualDensity类作为对象来控制 CheckBox 小部件的紧凑性。

例子：

Dart

import 'package:flutter/material.dart';
 
//importing material design liverary
void main() {
  runApp(MaterialApp(
    //runApp method
    home: HomePage(),
  ));//MaterialApp
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State {
  bool value = false;
 
  @override
  //App widget tree
  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(
          /** Card Widget **/
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: SizedBox(
                width: 430,
                height: 700,
                child: Column(
                  children: [
                    Text(
                      'Algorithms',
                      style: TextStyle(
                          color: Colors.greenAccent[400],
                          fontSize: 30), //TextStyle
                    ), //Text
                    SizedBox(height: 10),
                    Row(
                      children: [
                        SizedBox(
                          width: 10,
                        ), //SizedBox
                        Text(
                          'Liberary Implementation Of Searching Algorithm: ',
                          style: TextStyle(fontSize: 17.0),
                        ), //Text
                        SizedBox(width: 10), //SizedBox
                        /** Checkbox Widget **/
                        Checkbox(
                          value: this.value,
                          onChanged: (bool value) {
                            setState(() {
                              this.value = value;
                            });
                          },
                        ), //Checkbox
                      ], //[]
                    ), //Row
                  ],
                ), //Column
              ), //SizedBox
            ), //Padding
          ), //Card
        ), //Center//Center
      ), //Scaffold
    ); //MaterialApp
  }
}

输出：

说明： CheckBox的value属性在_HomePageState类开始时设置为 false。 CheckBox小部件位于Text小部件的前面，由Row内的SizedBox分隔。 CheckBox 小部件中的第一件事是调用value属性。然后我们有onChanged属性，它持有一个函数来改变 CheckBox 的状态，这使得 CheckBox 在点击时被选中。完成所有这些，我们得到了一个可以检查的任务。