如何在 Flutter 中过滤和更新 ListViewBuilder？

Question

    {
    "data": [
        {
            "title": "Asignment 1 ",
            "status": true,
            "date" : "7/18/2020"
        },
        {
            "title": "Asignment 2 ",
            "status": false,
            "date" : "7/18/2020"
        },
        {
            "title": "Asignment 2 ",
            "status": false,
            "date" : "7/18/2020"
        }
    ]
}

这是我从 API 获得的数据。


@override
  void initState() {
    _allTaskModel =
        API_Manager().getAllTasksofUser(firebaseAuth.currentUser.uid);

    super.initState();
  }

 @override
  // Widget projectWidget() {
  Widget build(BuildContext context) {
    return FutureBuilder<AllTasksModel>(
      future: _allTaskModel,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data.response.data.length > 0) {
            return ListView.builder(
                itemCount: snapshot.data.response.data.length,
                itemBuilder: (context, index) {
                  // UserDetailsModel userDetails = snapshot.data[index];
                  var tasks = snapshot.data.response.data[index];
                  return cardWidget(tasks);
                });
          } else
            return Container(
                child: Center(
              child: Text('No Task found'),
            ));
        } else {
          try {
            if (snapshot.data.response.data.length == 0) {
              return Container(
                  child: Center(
                child: Text('No Task found'),
              ));
            }
          } catch (e) {
            return Center(child: CircularProgressIndicator());
          }
        }
      },
    );
  }

我的 code.cardWidget() 基本上是 returns 包含任务数据的小部件。我想使用 SpeedDial 按钮根据状态将 listView 过滤为完整或不完整。当我单击 SpeedDial FloatingActionButtons 中的未完成按钮时，我想获得未完成任务列表。如何应用过滤器并更新列表？

Answer 1

如果我没理解错的话，你是从 api 加载的，你想要一个按钮单击时仅显示未完成的任务。如果是，那么您可以这样做：

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final tasks = {
    "data": [
      {"title": "Asignment 1 ", "status": true, "date": "7/18/2020"},
      {"title": "Asignment 2 ", "status": false, "date": "7/18/2020"},
      {"title": "Asignment 2 ", "status": false, "date": "7/18/2020"}
    ]
  };

  bool showOnlyIncomplete = false; // the value that controls which tasks will be shown
  
  // this function toggles the showOnlyIncomplete value between false and true when 
  // clicked
  void toggleShowOnlyIncomplete() =>
      setState(() => showOnlyIncomplete = !showOnlyIncomplete);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          ElevatedButton(
            child: showOnlyIncomplete ? Text('Show all') : Text('Show only incomplete'),
            onPressed: () => toggleShowOnlyIncomplete(),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: tasks['data'].length,
              itemBuilder: (context, index) {
                final task = tasks['data'][index];
                
                // If we only want to show incompleted tasks and the current task
                // is done we show an empty Container
                if (showOnlyIncomplete && task['status'])
                  return Container();

                return ListTile(
                  title: Text('${task['title'] ?? 'Unknown'}'),
                  subtitle: Text('${task['date'] ?? 'Unknown'}'),
                  trailing:
                      task['status'] ? Icon(Icons.check) : Icon(Icons.close),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

如何在 Flutter 中过滤和更新 ListViewBuilder？

How to filter and update ListViewBuilder in Flutter?

api

listview

flutter

flutter-dependencies

flutter-layout