当键处于活动状态时,是否可以从 ListView Builder 中隐藏元素?
Is it possible to hide an element from a ListView Builder when a key is active?
我决定练习一些基本的 Flutter 知识,所以我正在制作一个包含已完成和正在进行的任务的待办应用程序,每个任务都有自己的列表(所以我在这里使用两个列表).
我正在使用的列表视图询问开关变量是否对已完成的任务或正在进行的任务有效,因此它通过使用 Provider 管理屏幕状态,根据此信息构建元素列表。
我正在考虑使用单个列表的方法(因为我必须复制所有内容才能将内容添加到已完成的列表中)并显示 已标记 任务仅当 done 开关处于活动状态时。
换句话说:是否可以在任务被标记时从正在进行的列表中隐藏任务,并在用户单击“完成”选项卡时显示它(使用相同的列表视图)?
如果不是,我应该换一种方式吗?
我在这里创建了一个简单版本的待办事项应用创意供您参考。为每个具有 isDone
属性的任务项创建一个 Task
对象会更容易,您可以稍后操作并使用它来检查任务是否完成。类似于:
class Task {
bool isDone;
String content;
Task({this.isDone = false, this.content});
}
然后你可以使用一个_showDone
变量来控制是否显示已完成任务的状态。在这里,我在文本中加了一条斜杠,以表明这是一项已完成的任务。然后,如果您愿意,只需在按钮/选项卡单击中触发此 _showDone
。这里我使用了一个浮动的文本按钮。
完整实施:
import "package:flutter/material.dart";
main() {
runApp(MaterialApp(
home: HomePage(),
));
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _showDone = false;
List<Task> _tasks =
List<Task>.generate(10, (index) => Task(content: 'Task $index'));
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: TextButton(
onPressed: () => setState(() => _showDone = !_showDone),
child: _showDone ? Text('Hide done') : Text('Show done'),
),
appBar: AppBar(title: Text('Sample Todo App')),
body: Container(
alignment: Alignment.center,
child: ListView(
children: List<Widget>.generate(_tasks.length, (index) {
if (!_tasks[index].isDone) {
return _buildTaskItem(index);
} else {
if (_showDone) return _buildTaskItem(index);
return Container();
}
}),
),
),
);
}
Widget _buildTaskItem(index) {
return ListTile(
title: Text(
_tasks[index].content,
style: TextStyle(
decoration:
_tasks[index].isDone ? TextDecoration.lineThrough : null),
),
onTap: () => setState(() => _tasks[index].isDone = !_tasks[index].isDone),
);
}
}
class Task {
bool isDone;
String content;
Task({this.isDone = false, this.content});
}
我决定练习一些基本的 Flutter 知识,所以我正在制作一个包含已完成和正在进行的任务的待办应用程序,每个任务都有自己的列表(所以我在这里使用两个列表).
我正在使用的列表视图询问开关变量是否对已完成的任务或正在进行的任务有效,因此它通过使用 Provider 管理屏幕状态,根据此信息构建元素列表。
我正在考虑使用单个列表的方法(因为我必须复制所有内容才能将内容添加到已完成的列表中)并显示 已标记 任务仅当 done 开关处于活动状态时。
换句话说:是否可以在任务被标记时从正在进行的列表中隐藏任务,并在用户单击“完成”选项卡时显示它(使用相同的列表视图)?
如果不是,我应该换一种方式吗?
我在这里创建了一个简单版本的待办事项应用创意供您参考。为每个具有 isDone
属性的任务项创建一个 Task
对象会更容易,您可以稍后操作并使用它来检查任务是否完成。类似于:
class Task {
bool isDone;
String content;
Task({this.isDone = false, this.content});
}
然后你可以使用一个_showDone
变量来控制是否显示已完成任务的状态。在这里,我在文本中加了一条斜杠,以表明这是一项已完成的任务。然后,如果您愿意,只需在按钮/选项卡单击中触发此 _showDone
。这里我使用了一个浮动的文本按钮。
完整实施:
import "package:flutter/material.dart";
main() {
runApp(MaterialApp(
home: HomePage(),
));
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _showDone = false;
List<Task> _tasks =
List<Task>.generate(10, (index) => Task(content: 'Task $index'));
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: TextButton(
onPressed: () => setState(() => _showDone = !_showDone),
child: _showDone ? Text('Hide done') : Text('Show done'),
),
appBar: AppBar(title: Text('Sample Todo App')),
body: Container(
alignment: Alignment.center,
child: ListView(
children: List<Widget>.generate(_tasks.length, (index) {
if (!_tasks[index].isDone) {
return _buildTaskItem(index);
} else {
if (_showDone) return _buildTaskItem(index);
return Container();
}
}),
),
),
);
}
Widget _buildTaskItem(index) {
return ListTile(
title: Text(
_tasks[index].content,
style: TextStyle(
decoration:
_tasks[index].isDone ? TextDecoration.lineThrough : null),
),
onTap: () => setState(() => _tasks[index].isDone = !_tasks[index].isDone),
);
}
}
class Task {
bool isDone;
String content;
Task({this.isDone = false, this.content});
}