Flutter中如何筛选并展示指定allocation_date的JSON数据？

我来帮你搞定这个问题！核心思路就是在构建ListView之前先过滤出符合allocation_date为2008-08-31的数据，而不是直接渲染所有接口返回的条目。具体修改步骤如下：

步骤1：在FutureBuilder中添加数据过滤逻辑 #

当snapshot.data不为空时，先对数据进行筛选，只保留日期匹配的条目：

// 过滤出allocation_date为2008-08-31的数据
final filteredCalls = snapshot.data.where((call) => call['allocation_date'] == '2008-08-31').toList();

步骤2：基于过滤后的列表构建ListView #

把原来的snapshot.data替换成过滤后的filteredCalls，包括itemCount和itemBuilder中的数据引用。

修改后的完整todayCall方法代码 #

Widget todayCall(BuildContext context, resultCheck3) {
  return Container(
    child: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              child: Text("Today's Calls"),
            ),
          ],
        ),
        FutureBuilder(
          future: api3,
          builder: (context, snapshot) {
            if (snapshot.data != null) {
              // 关键：过滤指定日期的数据
              final filteredCalls = snapshot.data.where((call) => call['allocation_date'] == '2008-08-31').toList();
              
              return Container(
                child: ListView.builder(
                  // 使用过滤后的列表长度
                  itemCount: filteredCalls.length,
                  itemBuilder: (BuildContext conxt, int index) {
                    // 引用过滤后的列表数据
                    final call = filteredCalls[index];
                    return Card(
                      child: Padding(
                        padding: EdgeInsets.all(8.0), // 补充缺失的padding参数，避免布局报错
                        child: ExpansionTile(
                          title: Text('${call['customer_name']}'),
                          subtitle: Text('${call['error_message']}'"\n"'${call['allocation_date']}'),
                          trailing: Icon(Icons.arrow_drop_down, size: 30.0),
                          children: <Widget>[
                            ListTile(
                              title: Text("Machine Model", style: TextStyle(fontSize:13)),
                              subtitle: Text('${call['machine_type']}'),
                            ),
                            ListTile(
                              title: Text("Location", style: TextStyle(fontSize:13)),
                              subtitle: Text('${call['location_address']}'),
                            ),
                          ]
                        )
                      )
                    );
                  }
                )
              );
            }
            // 添加加载状态占位，提升用户体验
            return CircularProgressIndicator();
          }
        )
      ]
    )
  );
}

额外提示 #

• 如果你的需求是展示当天的动态数据，而不是固定日期，可以用DateTime.now()生成当前日期字符串替换'2008-08-31'，比如：

  final todayDate = DateFormat('yyyy-MM-dd').format(DateTime.now());
  final filteredCalls = snapshot.data.where((call) => call['allocation_date'] == todayDate).toList();
  

• 记得在顶部导入intl包来使用DateFormat：import 'package:intl/intl.dart';

这样修改后，你的ListView就只会展示目标日期的通话记录了。

内容的提问来源于stack exchange，提问作者shilpa navale