ListTile onLongPress 事件不工作 Flutter
ListTile onLongPress Event Not working Flutter
我在创建学习 Todo 应用程序时遇到奇怪的问题。我实现了 TaskList Class 和 TaskTile class 如下。
任务列表Class如下
import 'package:provider/provider.dart';
import 'package:todoey/Models/taskdata.dart';
import 'package:todoey/widgets/task_tile.dart';
class TasksList extends StatefulWidget {
@override
State<TasksList> createState() => _TasksListState();
}
class _TasksListState extends State<TasksList> {
@override
Widget build(BuildContext context) {
return Consumer<TaskData>(builder: (context, taskData, child) {
return ListView.builder(
itemBuilder: (context, index) {
final task = taskData.taskList[index];
return TaskTile(
longPressCallBack: () {
taskData.deleteTask(task);
},
name: task.name,
isChecked: task.isDone,
checkBoxCallBack: (newValue) {
taskData.updateTask(task);
},
);
},
itemCount: taskData.taskList.length,
);
});
}
}
TaskTile Class 如下
class TaskTile extends StatelessWidget {
final bool? isChecked;
final String name;
final Function checkBoxCallBack;
final Function longPressCallBack;
TaskTile(
{required this.name,
this.isChecked,
required this.checkBoxCallBack,
required this.longPressCallBack});
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(
name,
style: TextStyle(
decoration: isChecked! ? TextDecoration.lineThrough : null,
),
),
trailing: Checkbox(
fillColor: MaterialStateProperty.all(Colors.lightBlueAccent),
checkColor: Colors.white,
value: isChecked!,
onChanged: (newValue) {
checkBoxCallBack(newValue);
},
),
onLongPress: () => longPressCallBack,
);
}
}
现在的问题是它没有调用父 class 的 longPressCallBack,即 TaskList class。我进行了调试,它调用了 TaskTile 的 onLongPress class 但没有调用其父级 class 的回调,这就是 deleteTask 无法正常工作的原因。
问题出在您的 TaskTile
class 上的这一行 onLongPress: () => longPressCallBack,
。这里你只是调用 longPressCallBack
闭包引用 而不是执行闭包函数。
解决方案:
将该行更改为: onLongPress: () => longPressCallBack(),
或尝试直接将函数引用传递给 ListTile
的 onLongPress
属性,像这样 onLongPress: longPressCallBack,
可以用VoidCallback
代替,看下面的示例代码:
class _MyWidgetState extends State<MyWidget> {
String greeting = "Hello World!";
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
greeting,
style: Theme.of(context).textTheme.headline4,
),
TestButton(
onClickCallback: () {
setState(() {
greeting = "Hello Test!";
});
}
),
],
);
}
}
class TestButton extends StatelessWidget {
final VoidCallback onClickCallback;
const TestButton( {required this.onClickCallback});
@override
Widget build(BuildContext context) {
return ElevatedButton(
child: const Text("TestButton"),
onPressed: onClickCallback,
);
}
}
我在创建学习 Todo 应用程序时遇到奇怪的问题。我实现了 TaskList Class 和 TaskTile class 如下。
任务列表Class如下
import 'package:provider/provider.dart';
import 'package:todoey/Models/taskdata.dart';
import 'package:todoey/widgets/task_tile.dart';
class TasksList extends StatefulWidget {
@override
State<TasksList> createState() => _TasksListState();
}
class _TasksListState extends State<TasksList> {
@override
Widget build(BuildContext context) {
return Consumer<TaskData>(builder: (context, taskData, child) {
return ListView.builder(
itemBuilder: (context, index) {
final task = taskData.taskList[index];
return TaskTile(
longPressCallBack: () {
taskData.deleteTask(task);
},
name: task.name,
isChecked: task.isDone,
checkBoxCallBack: (newValue) {
taskData.updateTask(task);
},
);
},
itemCount: taskData.taskList.length,
);
});
}
}
TaskTile Class 如下
class TaskTile extends StatelessWidget {
final bool? isChecked;
final String name;
final Function checkBoxCallBack;
final Function longPressCallBack;
TaskTile(
{required this.name,
this.isChecked,
required this.checkBoxCallBack,
required this.longPressCallBack});
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(
name,
style: TextStyle(
decoration: isChecked! ? TextDecoration.lineThrough : null,
),
),
trailing: Checkbox(
fillColor: MaterialStateProperty.all(Colors.lightBlueAccent),
checkColor: Colors.white,
value: isChecked!,
onChanged: (newValue) {
checkBoxCallBack(newValue);
},
),
onLongPress: () => longPressCallBack,
);
}
}
现在的问题是它没有调用父 class 的 longPressCallBack,即 TaskList class。我进行了调试,它调用了 TaskTile 的 onLongPress class 但没有调用其父级 class 的回调,这就是 deleteTask 无法正常工作的原因。
问题出在您的 TaskTile
class 上的这一行 onLongPress: () => longPressCallBack,
。这里你只是调用 longPressCallBack
闭包引用 而不是执行闭包函数。
解决方案:
将该行更改为: onLongPress: () => longPressCallBack(),
或尝试直接将函数引用传递给 ListTile
的 onLongPress
属性,像这样 onLongPress: longPressCallBack,
可以用VoidCallback
代替,看下面的示例代码:
class _MyWidgetState extends State<MyWidget> {
String greeting = "Hello World!";
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(
greeting,
style: Theme.of(context).textTheme.headline4,
),
TestButton(
onClickCallback: () {
setState(() {
greeting = "Hello Test!";
});
}
),
],
);
}
}
class TestButton extends StatelessWidget {
final VoidCallback onClickCallback;
const TestButton( {required this.onClickCallback});
@override
Widget build(BuildContext context) {
return ElevatedButton(
child: const Text("TestButton"),
onPressed: onClickCallback,
);
}
}