CheckBox 没有被勾选
CheckBox not getting ticked
我正在制作一个列表应用程序,其中一个项目列表后跟一个复选框。当我 运行 应用程序时,复选框似乎改变了状态。它是非活动的。
我正在使用具有空安全性的 flutter sdk 版本 2.12.0。
这是我的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TaskTile extends StatefulWidget {
const TaskTile({ required this.text});
final Text text;
@override
State<TaskTile> createState() => _TaskTileState();
}
class _TaskTileState extends State<TaskTile> {
bool isChecked = true;
void checkBoxCallBack(bool checkBoxState)
{
setState((){
isChecked = checkBoxState;
});
}
@override
Widget build(BuildContext context) {
return ListTile(
title: Text('This is task',
style:TextStyle(
decoration: isChecked ? TextDecoration.lineThrough:null),
),
trailing: TaskCheckBox(isChecked, checkBoxCallBack),
);
}
}
class TaskCheckBox extends StatefulWidget {
late final bool checkboxState;
final Function toggleCheckBoxState;
TaskCheckBox(this.checkboxState, this.toggleCheckBoxState);
@override
State<TaskCheckBox> createState() => _TaskCheckBoxState();
}
class _TaskCheckBoxState extends State<TaskCheckBox> {
@override
Widget build(BuildContext context) {
return Checkbox(
value:(widget.checkboxState),
activeColor:Colors.lightBlueAccent,
onChanged: (bool? value) {
widget.toggleCheckBoxState;
},
);
}
}
试试下面的代码希望对你有帮助。
声明布尔变量
bool isChecked = false;
您的小工具
ListTile(
title: Text(
'This is task',
style: TextStyle(
decoration: isChecked ? TextDecoration.lineThrough : null),
),
trailing: Checkbox(
checkColor: Colors.white,
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
),
检查前的结果->
检查后的结果->
您可以这样调用setState()
:
setState(() {
isChecked = !isChecked;
});
toggleCheckBoxState
是一个没有参数的函数,这就是为什么状态在 checkBoxCallback
中没有改变,因为参数 checkBoxState
没有值。
要修复它,您应该按如下方式更改 TaskCheckBox
:
class TaskCheckBox extends StatefulWidget {
late final bool checkboxState;
final Function(bool?) toggleCheckBoxState;
TaskCheckBox(this.checkboxState, this.toggleCheckBoxState);
@override
State<TaskCheckBox> createState() => _TaskCheckBoxState();
}
class _TaskCheckBoxState extends State<TaskCheckBox> {
@override
Widget build(BuildContext context) {
return Checkbox(
value:(widget.checkboxState),
activeColor:Colors.lightBlueAccent,
onChanged: (bool? value) {
widget.toggleCheckBoxState(value);
},
);
}
}
我正在制作一个列表应用程序,其中一个项目列表后跟一个复选框。当我 运行 应用程序时,复选框似乎改变了状态。它是非活动的。 我正在使用具有空安全性的 flutter sdk 版本 2.12.0。
这是我的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class TaskTile extends StatefulWidget {
const TaskTile({ required this.text});
final Text text;
@override
State<TaskTile> createState() => _TaskTileState();
}
class _TaskTileState extends State<TaskTile> {
bool isChecked = true;
void checkBoxCallBack(bool checkBoxState)
{
setState((){
isChecked = checkBoxState;
});
}
@override
Widget build(BuildContext context) {
return ListTile(
title: Text('This is task',
style:TextStyle(
decoration: isChecked ? TextDecoration.lineThrough:null),
),
trailing: TaskCheckBox(isChecked, checkBoxCallBack),
);
}
}
class TaskCheckBox extends StatefulWidget {
late final bool checkboxState;
final Function toggleCheckBoxState;
TaskCheckBox(this.checkboxState, this.toggleCheckBoxState);
@override
State<TaskCheckBox> createState() => _TaskCheckBoxState();
}
class _TaskCheckBoxState extends State<TaskCheckBox> {
@override
Widget build(BuildContext context) {
return Checkbox(
value:(widget.checkboxState),
activeColor:Colors.lightBlueAccent,
onChanged: (bool? value) {
widget.toggleCheckBoxState;
},
);
}
}
试试下面的代码希望对你有帮助。
声明布尔变量
bool isChecked = false;
您的小工具
ListTile(
title: Text(
'This is task',
style: TextStyle(
decoration: isChecked ? TextDecoration.lineThrough : null),
),
trailing: Checkbox(
checkColor: Colors.white,
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
),
检查前的结果->
检查后的结果->
您可以这样调用setState()
:
setState(() {
isChecked = !isChecked;
});
toggleCheckBoxState
是一个没有参数的函数,这就是为什么状态在 checkBoxCallback
中没有改变,因为参数 checkBoxState
没有值。
要修复它,您应该按如下方式更改 TaskCheckBox
:
class TaskCheckBox extends StatefulWidget {
late final bool checkboxState;
final Function(bool?) toggleCheckBoxState;
TaskCheckBox(this.checkboxState, this.toggleCheckBoxState);
@override
State<TaskCheckBox> createState() => _TaskCheckBoxState();
}
class _TaskCheckBoxState extends State<TaskCheckBox> {
@override
Widget build(BuildContext context) {
return Checkbox(
value:(widget.checkboxState),
activeColor:Colors.lightBlueAccent,
onChanged: (bool? value) {
widget.toggleCheckBoxState(value);
},
);
}
}