Flutter Widget之Checkbox

Widget:https://flutter.io/docs/development/ui/widgets
Checkbox:https://docs.flutter.io/flutter/material/Checkbox-class.html
     

import 'package:flutter/material.dart';

class CheckBoxDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _CheckBoxDemoPageState();
  }
}

class _CheckBoxDemoPageState extends State<CheckBoxDemoPage> {
  bool isCheck = false;
  List<bool> isChecks = [false, false];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('CheckBox Demo'),
      ),
      body: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          new Center(
            child: new Checkbox(
              value: isCheck,
              activeColor: Colors.red,
              onChanged: (bool) {
                setState(() {
                  isCheck = bool;
                });
              },
            ),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isCheck,
                title: new Text('Joe.Ye'),
                controlAffinity: ListTileControlAffinity.platform,
                //控制亲和度: leading按钮显示在文字前面, trailing按钮显示在文字的后面, platform显示样式根据手机当前平台默认显示
                onChanged: (bool) {
                  setState(() {
                    isCheck = bool;
                  });
                }),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isCheck,
                title: new Text('Joe.Ye'),
                secondary: const Icon(Icons.access_alarm),
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  setState(() {
                    isCheck = bool;
                  });
                }),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isCheck,
                title: new Text('Joe.Ye'),
                controlAffinity: ListTileControlAffinity.leading,
                onChanged: (bool) {
                  setState(() {
                    isCheck = bool;
                  });
                }),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isCheck,
                title: new Text('AppBlog.CN'),
                controlAffinity: ListTileControlAffinity.trailing,
                onChanged: (bool) {
                  setState(() {
                    isCheck = bool;
                  });
                }),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isCheck,
                title: new Text('http://www.appblog.cn'),
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  setState(() {
                    isCheck = bool;
                  });
                }),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isChecks[0],
                title: new Text('Android'),
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  setState(() {
                    isChecks[0] = bool;
                  });
                }),
          ),
          new Center(
            child: new CheckboxListTile(
                value: isChecks[1],
                title: new Text('iOS'),
                controlAffinity: ListTileControlAffinity.platform,
                onChanged: (bool) {
                  setState(() {
                    isChecks[1] = bool;
                  });
                }),
          )
        ],
      )
    );
  }
}

Flutter Widget Checkbox

版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/16/flutter-widget-checkbox/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
Flutter Widget之Checkbox
Widget:https://flutter.io/docs/development/ui/widgets Checkbox:https://docs.flutter.io/flutter/material/Checkbox-class.html       import 'p……
<<上一篇
下一篇>>
文章目录
关闭
目 录