Flutter中实现API数据ListView展示及月份名称搜索过滤

问题梳理 #

现有代码存在以下核心问题：

1. 提供的API数据缺失date字段，无法实现按月份过滤
2. 搜索过滤函数未更新状态变量，也未触发UI刷新
3. 未实现ListView与过滤数据的绑定
4. 界面为英文，需切换为中文

修正后的完整实现 #

带date字段的示例API数据 #

[
  {
    "transGroup": 1,
    "transType": 0,
    "serviceTypeId": 85,
    "date": "2024-03-15"
  },
  {
    "transGroup": 2,
    "transType": 9,
    "serviceTypeId": 78,
    "date": "2024-04-20"
  },
  {
    "transGroup": 3,
    "transType": 5,
    "serviceTypeId": 92,
    "date": "2024-03-25"
  }
]

完整Flutter代码 #

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '月份过滤交易列表',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const TransactionListPage(),
    );
  }
}

class TransactionListPage extends StatefulWidget {
  const TransactionListPage({super.key});

  @override
  State<TransactionListPage> createState() => _TransactionListPageState();
}

class _TransactionListPageState extends State<TransactionListPage> {
  final List _transactionData = [
    {
      "transGroup": 1,
      "transType": 0,
      "serviceTypeId": 85,
      "date": "2024-03-15"
    },
    {
      "transGroup": 2,
      "transType": 9,
      "serviceTypeId": 78,
      "date": "2024-04-20"
    },
    {
      "transGroup": 3,
      "transType": 5,
      "serviceTypeId": 92,
      "date": "2024-03-25"
    }
  ];

  List _filteredTransactions = [];

  @override
  void initState() {
    _filteredTransactions = _transactionData;
    super.initState();
  }

  void _filterByMonth(String keyword) {
    List results = [];
    final monthFormatter = DateFormat('MMMM', 'zh_CN');

    if (keyword.isEmpty) {
      results = _transactionData;
    } else {
      results = _transactionData.where((item) {
        final date = DateTime.parse(item["date"]);
        final monthName = monthFormatter.format(date).toLowerCase();
        return monthName.contains(keyword.toLowerCase());
      }).toList();
    }

    setState(() {
      _filteredTransactions = results;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('交易列表')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              onChanged: _filterByMonth,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: '搜索月份',
                hintText: '例如：三月',
              ),
            ),
            const SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: _filteredTransactions.length,
                itemBuilder: (ctx, index) {
                  final item = _filteredTransactions[index];
                  final date = DateTime.parse(item["date"]);
                  final monthName = DateFormat('MMMM', 'zh_CN').format(date);

                  return Card(
                    margin: const EdgeInsets.symmetric(vertical: 8),
                    child: ListTile(
                      title: Text('交易组：${item["transGroup"]}'),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('交易类型：${item["transType"]}'),
                          Text('服务ID：${item["serviceTypeId"]}'),
                          Text('月份：$monthName'),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键调整说明 #

1. 补全date字段：API数据必须包含日期字段，这是月份过滤的前提
2. 中文月份转换：使用intl包将日期转为中文月份名称，需在pubspec.yaml添加依赖：

   dependencies:
     flutter:
       sdk: flutter
     intl: ^0.19.0
   

3. 状态更新：过滤函数中调用setState()更新列表数据，确保UI实时响应输入
4. 列表绑定：通过ListView.builder渲染过滤后的数据集
5. 中文界面：设置本地化格式为中文，界面文本全部使用中文

运行效果说明 #

修正后界面为中文，输入月份名称（如"三月"）即可实时过滤出对应月份的交易数据，解决原英文界面及过滤失效问题。

内容的提问来源于stack exchange，提问作者Ravindra S. Patil