允许在 Flutter 中使用 ListView 过滤卡片

Question

我正在创建一个小型 Flutter 程序，该程序显示卡片，显示任务的完成情况，并在屏幕顶部显示小型过滤选项。每张卡片都包含一个“任务”对象，该对象具有一个

CompletionStatus

枚举，包含四个值，这些值用于通过过滤选项过滤任务。我的问题在于实现此功能，因为尽管阅读了

setState

并尝试实现此功能，但我似乎无法理解它，因此卡片没有被过滤。任何帮助将不胜感激。

任务卡文件：

class TaskCard extends StatefulWidget {
  final Task task;
  const TaskCard(this.task, {Key? key}) : super(key: key);

  @override
  State<TaskCard> createState() => _TaskCardState();
}

class _TaskCardState extends State<TaskCard> {
  String statusText = "";
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.fromLTRB(8, 8, 8, 8),
          width: double.maxFinite,
          child: ListView.builder(
            itemCount: taskList.length,
            itemBuilder: ((context, index) {
              final Task task = taskList.toList()[index];
              if (task.status == CompletionStatus.notStarted) {
                statusText = "Not Started";
              } else if (task.status == CompletionStatus.inProgress) {
                statusText = "In Progress";
              } else if (task.status == CompletionStatus.completed) {
                statusText = "Completed";
              } else {
                statusText = "Cancelled";
              }

              return Card(
                //Card code
            }),
          ),
        ),
      ),
    );
  }
}

过滤器小部件文件：

class FilterPills extends StatefulWidget {
  final Function(String) onSelected;

  const FilterPills({Key? key, required this.onSelected}) : super(key: key);

  @override
  State<FilterPills> createState() => _FilterPillsState();
}

class _FilterPillsState extends State<FilterPills> {
  String selectedFilter = "All tasks";

//Used to create a filtered list which can be used to show the appropriate cards
  Iterable<Task> filteredList = taskList.where((task) {
    return task.status == CompletionStatus.notStarted;
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).colorScheme.surface,
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            const SizedBox(width: 12),
            ...filters.map((filter) {
              final isSelected = filter == selectedFilter;
              return Padding(
                padding: const EdgeInsets.only(left: 8.0),
                child: FilterChip(
                  selected: isSelected,
                  label: Text(filter,
                      style: Theme.of(context).textTheme.bodyMedium),
                  selectedColor: const Color(0xFFE8DEF8),
                  backgroundColor: Colors.white,
                  side: BorderSide(
                    color: isSelected
                        ? Colors.transparent
                        : const Color(0xFF79747E),
                  ),
                  onSelected: (isSelected) {
                    if (isSelected) {
                      setState(() {});
                      widget.onSelected(filter);
                    }
                  },
                ),
              );
            }).toList(),
            const SizedBox(width: 12),
          ],
        ),
      ),
    );
  }
}

Answer 1

“setState”可以在您的小部件中发生某些变化时使用，或者只是强制小部件重绘调用。

知道这一点后，您有 2 个选择： 将卡片列表设置为存储所有卡片的小部件的属性。 设置过滤卡选择，您仅存储通过过滤功能过滤的卡。

在您的

initState()

中，您将所有卡片存储在filteredCards中，因为默认情况下没有活动的过滤器。

@override
initState(){
    super.initState();

    filteredCards = AllCards;
}

然后，当您通过按钮、文本字段等执行过滤器操作时，您可以使用该值来调用

setState({
    filteredCards = someMethodToFilterCards(filterCondiction);
})

这将确保构建方法被调用，并且它只会显示过滤后的卡片。