[英]how to generate a CheckboxListTile in flutter
我是 flutter 的新手,我正在制作 ToDo 应用程序,我做了第一个任务,但我不知道如何生成它并让用户单击添加按钮,并且可以在弹出窗口中添加自己的任务页面,用户可以添加任务和任务的详细信息,任务显示在应用程序的主屏幕上
我在网上搜索但不知道怎么做
谁能帮忙
class _MainTaskScreenState extends State<MainTaskScreen> {
bool _valueCheck = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.mainColor,
//------------------------------------------------------------------------------
// AddTask Button...
floatingActionButton: FloatingActionButton(
onPressed: (() {}),
backgroundColor: AppColor.mainColor,
child: const Icon(
FontAwesomeIcons.plus,
color: AppColor.accentColor,
),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 60, left: 30, right: 30, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//------------------------------------------------------------------------------
// Menu Button..
(ElevatedButton(
style: ElevatedButton.styleFrom(
primary: AppColor.accentColor,
onPrimary: AppColor.mainColor,
fixedSize: const Size(70, 70),
shape: const CircleBorder()),
onPressed: (() {}),
child: const Icon(FontAwesomeIcons.listUl, size: 30),
)),
const SizedBox(height: 10),
//------------------------------------------------------------------------------
// Title...
Text('Todoey', style: AppFonts.titleStyle),
//------------------------------------------------------------------------------
// Task's Num...
Text('12 Task', style: AppFonts.smallStyle),
],
),
),
//------------------------------------------------------------------------------
// Task's List...
Expanded(
child: Container(
padding: const EdgeInsets.only(left: 20),
width: double.infinity,
decoration: const BoxDecoration(
color: AppColor.accentColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
),
),
//-----------------------------------------------
child: ListView(
children: [
CheckboxListTile(
title: Text('Clean you room', style: TaskText.smallStyle),
subtitle:
const Text('remove the trach + clean your cloths'),
activeColor: AppColor.accentColor,
checkColor: AppColor.mainColor,
value: _valueCheck,
selected: _valueCheck,
onChanged: ((value) {
setState(() {
_valueCheck = value!;
});
}),
),
],
),
),
),
],
),
);
}
}
为此,最好使用 model class。
class Task {
final String text;
final String? description;
final bool isChecked;
Task({
required this.text,
this.description,
this.isChecked = false,
});
Task copyWith({
String? text,
String? description,
bool? isChecked,
}) {
return Task(
text: text ?? this.text,
description: description ?? this.description,
isChecked: isChecked ?? this.isChecked,
);
}
}
你可以关注这个小部件
class _MainTaskScreenState extends State<MainTaskScreen> {
List<Task> tasks = [Task(text: "task x")];
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (() {
tasks.add(Task(text: "New Task ${tasks.length}"));
setState(() {});
}),
child: const Icon(
FontAwesomeIcons.plus,
),
),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
return CheckboxListTile(
title: Text(tasks[index].text),
value: tasks[index].isChecked,
onChanged: (value) {
tasks[index] = tasks[index].copyWith(isChecked: value);
setState(() {});
},
);
},
))
],
));
}
}
你可以这样做:
首先像这样制作任务 model :
class Task {
final String title;
final bool isCheck;
Task(this.title, this.isCheck);
Task change(bool value) {
return Task(
this.title,
value,
);
}
}
然后在你的 _MainTaskScreenState 中创建这个变量:
List<Task> _tasks = [];
然后从弹出页面返回后插入数据,如下所示:
_tasks.add(Task('some thing', false));
然后将您的 listView 更改为:
ListView.builder(itemBuilder: (context, index){
return CheckboxListTile(
title: Text(_tasks[index].title, style: TaskText.smallStyle),
subtitle:
const Text('remove the trach + clean your cloths'),
activeColor: AppColor.accentColor,
checkColor: AppColor.mainColor,
value: _tasks[index].isCheck,
selected: _tasks[index].isCheck,
onChanged: ((value) {
setState(() {
_tasks[index] = _tasks[index].change(value);
});
}),
);
},
itemCount: _tasks.length),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.