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

上一篇 Flutter Widget之TextField
下一篇 Flutter Widget之Radio
目录
文章列表
1 Android自动朗读(TTS)的实现
Android自动朗读(TTS)的实现
2
CentOS 7 下搭建NFS服务
CentOS 7 下搭建NFS服务
3
MySQL NULL 值处理
MySQL NULL 值处理
4
CentOS下安装Python
CentOS下安装Python
5
Android中Bitmap、Drawable、byte[]互转
Android中Bitmap、Drawable、byte[]互转
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。