Flutter中按日、周、月、年筛选并展示支出数据的方案

1. 绑定下拉菜单选择事件 #

先获取下拉菜单DOM元素，给它绑定change事件以捕获用户选中的维度值：

const dimensionSelector = document.getElementById('expense-dimension-select');
dimensionSelector.addEventListener('change', handleDimensionChange);

2. 实现维度筛选逻辑 #

在事件处理函数中，根据选中的day/week/month/year维度对支出数据做过滤。假设你的支出数据是包含date字段的数组（例：expenseData = [{id:1, amount:50, date:'2024-05-20'}, ...]）：

function handleDimensionChange(e) {
  const selectedDimension = e.target.value;
  let filteredData = [];
  const now = new Date();
  
  switch(selectedDimension) {
    case 'day':
      // 筛选今日支出
      const todayStr = now.toISOString().split('T')[0];
      filteredData = expenseData.filter(item => item.date === todayStr);
      break;
    case 'week':
      // 筛选本周支出（以周一为起始，可按需调整）
      const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay() + 1));
      const endOfWeek = new Date(startOfWeek);
      endOfWeek.setDate(endOfWeek.getDate() + 6);
      filteredData = expenseData.filter(item => {
        const itemDate = new Date(item.date);
        return itemDate >= startOfWeek && itemDate <= endOfWeek;
      });
      break;
    case 'month':
      // 筛选本月支出
      const currentMonth = now.getMonth();
      const currentYear = now.getFullYear();
      filteredData = expenseData.filter(item => {
        const itemDate = new Date(item.date);
        return itemDate.getMonth() === currentMonth && itemDate.getFullYear() === currentYear;
      });
      break;
    case 'year':
      // 筛选本年支出
      const currentYearFull = now.getFullYear();
      filteredData = expenseData.filter(item => new Date(item.date).getFullYear() === currentYearFull);
      break;
    default:
      filteredData = expenseData; // 默认显示全部数据
  }
  
  // 触发UI更新
  updateExpenseUI(filteredData);
}

3. 更新主UI展示筛选结果 #

实现updateExpenseUI函数，将筛选后的数据渲染到页面的支出展示区域：

function updateExpenseUI(data) {
  const expenseContainer = document.getElementById('expense-list-container');
  // 清空现有内容
  expenseContainer.innerHTML = '';
  
  if(data.length === 0) {
    expenseContainer.innerHTML = '<p>当前维度下无支出记录</p>';
    return;
  }
  
  // 遍历渲染每条支出
  data.forEach(item => {
    const expenseItem = document.createElement('div');
    expenseItem.className = 'expense-item';
    expenseItem.innerHTML = `
      <span>日期：${item.date}</span>
      <span>金额：${item.amount}元</span>
    `;
    expenseContainer.appendChild(expenseItem);
  });
  
  // 可选：更新总支出统计
  const totalAmount = data.reduce((sum, item) => sum + item.amount, 0);
  document.getElementById('total-expense').textContent = `总支出：${totalAmount}元`;
}

注意事项 #

• 确保支出数据中的date字段格式可被new Date()正确解析（如YYYY-MM-DD），格式不一致需先做转换。
• 一周的起始可按需调整（若以周日为起始，去掉now.getDay()后的+1即可）。
• 若使用React/Vue等框架，逻辑思路一致：绑定选择事件、过滤数据、通过状态驱动UI更新。

内容的提问来源于stack exchange，提问作者Yadnesh Narawade