当键处于活动状态时，是否可以从 ListView Builder 中隐藏元素？答案

【问题标题】：Is it possible to hide an element from a ListView Builder when a key is active?当键处于活动状态时，是否可以从 ListView Builder 中隐藏元素？
【发布时间】：2021-06-29 16:48:50
【问题描述】：

我决定将一些基本的 Flutter 知识付诸实践，因此我正在制作一个包含已完成和正在进行的任务的待办事项应用程序，每个任务都有自己的列表（所以我在这里使用两个列表）。

我正在使用的列表视图会询问开关变量是否对已完成的任务或正在进行的任务处于活动状态，因此它通过使用 Provider 管理屏幕状态来根据此信息构建元素列表。

我正在考虑一种使用单个列表的方法（因为我必须复制所有内容才能将内容添加到已完成列表中）并仅在标记任务时显示>完成开关处于活动状态。

换句话说：是否有可能在任务被标记时从正在进行的列表中隐藏它，并在用户单击“完成”选项卡时显示它（使用相同的列表视图）？

如果没有，我应该以不同的方式进行吗？

【问题讨论】：

标签： android list flutter listview dart

【解决方案1】：

我在此处创建了您的 Todo 应用创意的简单版本供您参考。使用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});
}

【讨论】：