/*
const Checkbox({
Key key,
@required this.value,
this.tristate = false,//在原true flase两种状态下,增加第三种状态 null 。显示为破折号
@required this.onChanged,//点击时回调
this.activeColor,//选中时背景颜色
this.checkColor,//选中时小勾颜色
this.focusColor,
this.hoverColor,
this.materialTapTargetSize,
this.focusNode,
this.autofocus = false,
})
const CheckboxListTile({
Key key,
@required this.value,//是否选中
@required this.onChanged,//点击时回调
this.activeColor,//选中时背景颜色
this.checkColor,//选中时小勾颜色
this.title, //正标题
this.subtitle,//副标题
this.isThreeLine = false,//开启时subtitle必须有值,当title未空时可以使subtitle 居中
this.dense,
this.secondary,//左侧小图标
this.selected = false,
this.controlAffinity = ListTileControlAffinity.platform,
ListTileControlAffinity.leading,将控制器放置在前端
ListTileControlAffinity.trailing,将控制器放置在后端
ListTileControlAffinity.platform,默认模式,将空气放置在后端
})
*/
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<MyApp> {
bool _checkboxSelected = true; //维护复选框状态
bool _checkboxTitleSelected = true; //维护复选框状态
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Flutter Deam",
color: Colors.white,
home: Scaffold(
appBar: AppBar(
title: const Text('Checkbox Sample'),
),
body: Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red,
checkColor:Colors.blue,
onChanged: (value) {
setState(() {
_checkboxSelected = value;
});
},
),
SizedBox(
width: 300.0,
child:CheckboxListTile(
controlAffinity:ListTileControlAffinity.trailing,
value: _checkboxTitleSelected,
title: Text("title"),
subtitle: Text("subtitle"),
secondary: Image.network(
"https://pcdn.flutterchina.club/imgs/3-17.png"),
onChanged: (value) {
setState(() {
_checkboxTitleSelected = value;
});
},
) ,
),
],
),
),
),
);
}
}
常用方法已经添加了注释,可复制代码直接运行看效果