Flutter中实现点击/长按time_planner空白单元格添加新任务

核心思路 #

TimePlanner组件自带onCellTap和onCellLongPress回调，点击空白单元格时会返回该单元格对应的TimePlannerDateTime（包含天、小时、分钟信息），我们可以直接用这个时间数据创建对应时段的任务。

关键修改步骤 #

1. 将任务列表提升为State成员变量
   原代码里的任务列表是在弹窗内部定义的，无法外部更新。把它移到_timeselectState类中作为成员变量，这样调用setState时才能同步更新UI。

2. 添加单元格点击/长按回调
   在TimePlanner组件中配置onCellTap或onCellLongPress参数，通过回调拿到点击单元格的时间信息，触发任务添加逻辑。

3. 完善任务添加逻辑
   修改_addTask方法，让它接收TimePlannerDateTime参数，创建对应时段的任务并添加到任务列表，最后调用setState刷新界面。

修改后的完整代码 #

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

class TimeSelect extends StatefulWidget {
  @override
  _TimeSelectState createState() => _TimeSelectState(); 
}

class _TimeSelectState extends State<TimeSelect> {
  DateTime selectedDate = DateTime.now();
  // 将任务列表改为State成员变量
  List<TimePlannerTask> tasks = [
    TimePlannerTask(
      color: Color.fromARGB(255, 144, 0, 255),
      dateTime: TimePlannerDateTime(day: 0, hour: 09, minutes: 15),
      minutesDuration: 50,
      onTap: () {},
      child: const Text(
        'sample text here',
        style: TextStyle(color: Colors.white, fontSize: 12),
      ),
    ),
  ];

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(2022, 8),
      lastDate: DateTime(2024)
    );
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  // 修改_addTask方法，接收单元格的时间参数
  void _addTask(TimePlannerDateTime cellDateTime) {
    setState(() {
      tasks.add(TimePlannerTask(
        color: const Color.fromARGB(255, 188, 117, 117),
        dateTime: cellDateTime,
        minutesDuration: 45,
        daysDuration: 1,
        onTap: () {},
        child: const Text(
          '新任务',
          style: TextStyle(color: Colors.grey[350], fontSize: 12),
        ),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 11),
        child: Column(
          children: [
            ElevatedButton(
              child: const Text('今日时间表...'),
              onPressed: () {
                showModalBottomSheet<void>(
                  context: context,
                  isScrollControlled: true,
                  builder: (BuildContext context) {
                    return Container(
                      height: MediaQuery.of(context).size.height * 0.8, 
                      color: Colors.white,
                      child: Center(
                        child: Column(
                          children: <Widget>[
                            SizedBox(
                              height: 600, 
                              child: TimePlanner(
                                style: TimePlannerStyle(
                                  cellHeight: 60,
                                  cellWidth: 291,
                                  dividerColor: Colors.white,
                                  showScrollBar: true,
                                  horizontalTaskPadding: 1,
                                  borderRadius: const BorderRadius.all(Radius.circular(5)),
                                ),
                                currentTimeAnimation: true,
                                startHour: 8,
                                endHour: 20,
                                headers: const [
                                  TimePlannerTitle(                        
                                    date: "3/10/2023",
                                    title: "星期日",                        
                                  ),
                                ],
                                tasks: tasks,
                                // 添加单元格点击回调，触发任务添加
                                onCellTap: (cellDateTime) {
                                  _addTask(cellDateTime);
                                },
                                // 可选：添加长按回调
                                // onCellLongPress: (cellDateTime) {
                                //   _addTask(cellDateTime);
                                // },
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 点击空白单元格时，onCellTap会返回该单元格对应的TimePlannerDateTime，直接用这个时间创建任务，保证任务时段和点击的单元格完全对应
• 任务列表改为State成员后，调用setState就能实时更新TimePlanner的任务展示
• 如果需要更复杂的任务创建流程（比如让用户输入任务名称、设置时长），可以在onCellTap里弹出对话框，收集信息后再创建任务

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