在 Flutter 中使用日历周时更改数据

Question

我这里有一个这样的表格。当我向左或向右滑动日历周时，我想更改下面蓝色按钮周的值。我该怎么办？只有当我点击数字时才能更改

这是我正在使用的代码：

    import 'package:flutter/material.dart';
import 'package:myhumgupdate/App/Config/palette.dart';
import 'package:myhumgupdate/Widgets/dialog_loading.dart';
import 'package:myhumgupdate/giangvien/Screens/XemTKB/TKBTheoTuan/tkbtuan_viewmodel.dart';
import 'package:myhumgupdate/Widgets/calender_week.dart';
import 'package:myhumgupdate/giangvien/models/meeting.dart';
import 'package:myhumgupdate/giangvien/models/meetingdata_source.dart';
import 'package:stacked/stacked.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

class TKBTuan extends StatefulWidget {
  @override
  _TKBTuanState createState() => _TKBTuanState();
}

final String _customTimeLabelText = 'Tiết';

class _TKBTuanState extends State<TKBTuan> {
  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<TKBTuanViewModel>.reactive(
        onModelReady: (model) => Future.delayed(Duration.zero,
            () => DialogLoading.show(context, model.getTkbTuan(model.timeNow))),
        builder: (context, TKBTuanViewModel model, child) => Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.only(
                          top: 18,
                        ),
                        child: CalendarWeek(
                          calendarController: model.calendarController,
                          press: (DateTime date, _, __) {
                            model.getTkbTuan(date);
                          },
                        ),
                      ),
                    ),
                    Container(
                      width: 40,
                      height: 56,
                      margin: EdgeInsets.only(right: 3),
                      padding: EdgeInsets.symmetric(horizontal: 4, vertical: 5),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Palette.kPrimaryColor,
                      ),
                      child: Center(
                        child: Text(
                          "Week ${model.week}",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 12,
                              fontWeight: FontWeight.bold),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: SfCalendar(
                    view: CalendarView.week,
                    firstDayOfWeek: 1,
                    maxDate: DateTime(DateTime.now().year, DateTime.now().month,
                        DateTime.now().day, 00, 45, 0),
                    minDate: DateTime(DateTime.now().year, DateTime.now().month,
                        DateTime.now().day, 00, 45, 0),
                    headerHeight: 0,
                    viewHeaderHeight: 0,
                    dataSource: MeetingDataSource(model.getDataSource),
                    appointmentTimeTextFormat: 'hh:mm:ss a',
                    appointmentBuilder: appointmentBuilder,
                    initialDisplayDate: DateTime(DateTime.now().year,
                        DateTime.now().month, DateTime.now().day, 00, 45, 0),
                    monthViewSettings: MonthViewSettings(showAgenda: true),
                    timeSlotViewSettings: TimeSlotViewSettings(
                        startHour: 0,
                        endHour: 16,
                        timeFormat: _customTimeLabelText + " H",
                        timeIntervalHeight: 70,
                        timeTextStyle: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                        )),
                    // selectionDecoration: BoxDecoration(
                    //   color: Colors.transparent,
                    //   border: Border.all(color: Colors.red, width: 1),
                    //   borderRadius: const BorderRadius.all(Radius.circular(4)),
                    //   shape: BoxShape.rectangle,
                    // ),
                  ),
                ),
              ],
            ),
        viewModelBuilder: () => TKBTuanViewModel());
  }
}

Widget appointmentBuilder(BuildContext context,
    CalendarAppointmentDetails calendarAppointmentDetails) {
  final Meeting appointment = calendarAppointmentDetails.appointments.first;
  return Container(
    width: calendarAppointmentDetails.bounds.width,
    height: calendarAppointmentDetails.bounds.height,
    // color: appointment.background,
    decoration: BoxDecoration(
      color: appointment.background,
      border: Border.all(
        color: Colors.grey,
        width: 0.5,
      ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.fromLTRB(2.0, 0, 0, 5.0),
          child: Text(
            appointment.eventName,
            // textAlign: TextAlign.center,
            style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
          ),
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(2.0, 0, 0, 0),
          child: Text(
            "Phòng: ${appointment.subText}",
            style: TextStyle(fontSize: 10, fontStyle: FontStyle.italic),
          ),
        )
      ],
    ),
  );
}

如果没有办法改变这样的值，我应该做什么以及如何改变它？

Answer 1

在 Flutter 事件日历中，您可以使用 CalendarController 的

selectedDate

属性以编程方式选择日期。

在状态内部，初始化日历控制器。

final CalendarController _calendarController= CalendarController();

使用 Flutter 事件日历的 onViewChanged 回调，可以将可见日期的第一个日期设置为选定日期。

child: SfCalendar(
  view: CalendarView.month,
  controller: _calendarController,
  onViewChanged: viewChanged,
),
void viewChanged(ViewChangedDetails viewChangedDetails) {
  SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
    _calendarController.selectedDate = viewChangedDetails.visibleDates[0];
  });
}

将您的小部件包裹在

GestureDetector

中并像这样使用

onPanUpdate

：

GestureDetector(onPanUpdate: (details) {
  if (details.delta.dx > 0) {
    // swiping in right direction
    // update week number
  }
});

Answer 2

我也希望设计一个相同的界面。你介意我引用你的源代码吗？