Flutter中如何为星期按钮绑定对应日期以实现餐厅预订？

要实现星期按钮对应实际日期的需求，你需要将星期标识、按钮文本和对应的日期绑定在一起，通过计算获取每个按钮对应的目标日期。以下是具体实现步骤：

1. 定义星期数据模型 #

创建一个类来统一存储星期的标识、按钮文本和对应的日期，方便管理和使用：

class WeekDayData {
  final String id; // 对应原有的seg/ter/qua等标识
  final String label; // 按钮显示文本（Segunda/Terça等）
  final DateTime date; // 该星期对应的实际日期

  WeekDayData({
    required this.id,
    required this.label,
    required this.date,
  });
}

2. 初始化并计算目标日期 #

在State类中添加初始化逻辑，根据当前日期计算每个星期按钮对应的目标日期：

class _GastronomyOptionScreenState extends State<GastronomyOptionScreen> {
  late List<WeekDayData> _weekDays;
  late WeekDayData _selectedWeekDay; // 存储选中的星期数据（含id和日期）

  @override
  void initState() {
    super.initState();
    final today = DateTime.now().toLocal(); // 获取本地当前日期
    // 初始化所有星期按钮的对应数据
    _weekDays = [
      WeekDayData(id: 'seg', label: 'Segunda', date: _getTargetDate(today, 1)),
      WeekDayData(id: 'ter', label: 'Terça', date: _getTargetDate(today, 2)),
      WeekDayData(id: 'qua', label: 'Quarta', date: _getTargetDate(today, 3)),
      WeekDayData(id: 'qui', label: 'Quinta', date: _getTargetDate(today, 4)),
      WeekDayData(id: 'sex', label: 'Sexta', date: _getTargetDate(today, 5)),
    ];
    // 默认选中原有的seg（可改为默认选中今天对应的星期）
    _selectedWeekDay = _weekDays.firstWhere((wd) => wd.id == 'seg');
  }

  // 计算目标星期对应的日期
  DateTime _getTargetDate(DateTime today, int targetWeekday) {
    // Dart中DateTime.weekday：1=周一，2=周二...5=周五，6=周六，7=周日
    final daysToAdd = targetWeekday >= today.weekday
        ? targetWeekday - today.weekday
        : (7 - today.weekday) + targetWeekday;
    return today.add(Duration(days: daysToAdd));
  }

  // 格式化日期为DD-MM格式（如08-04）
  String _formatDate(DateTime date) {
    return '${date.day.toString().padLeft(2, '0')}-${date.month.toString().padLeft(2, '0')}';
  }

  // ... 原有代码
}

3. 更新按钮列表和选中逻辑 #

将原来硬编码的WeekButton替换为遍历_weekDays生成，同时更新选中状态的判断：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: _weekDays.map((weekDay) {
    return WeekButton(
      weekDay.label,
      onPressed: () => setState(() => _selectedWeekDay = weekDay),
      selected: _selectedWeekDay.id == weekDay.id,
    );
  }).toList(),
),

4. 替换原有筛选逻辑 #

将原来使用_idDiaSem的地方替换为_selectedWeekDay.id，同时可以随时通过_formatDate(_selectedWeekDay.date)获取格式化后的日期字符串：

final dayOfWeekMeals = DUMMY_MEALS
    .where((meal) =>
        meal.idDiaSem.any((idDiaSem) => idDiaSem == _selectedWeekDay.id) &&
        meal.idCategory.any((idCategory) => idCategory == 'ga'))
    .toList();

使用说明 #

• 现在点击任意星期按钮，_selectedWeekDay会同时保存对应的星期标识和日期
• 调用_formatDate(_selectedWeekDay.date)即可得到如08-04这样的日期字符串，用于记录预订日期
• 如果需要默认选中今天对应的星期，只需将initState中的默认选中逻辑改为：

  _selectedWeekDay = _weekDays.firstWhere((wd) => wd.date.weekday == today.weekday);
  

内容的提问来源于stack exchange，提问作者pedro.curti