運(yùn)行效果

QQ錄屏2021081916253220218191626152.gif

組件基于：table_calendar進(jìn)行修改

https://pub.dev/packages/table_calendar

使用代碼

import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:lnsl_credit_flutter/base/base_routes_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lnsl_credit_flutter/routes/shiftSearch/utils/utils.dart';
import 'package:lnsl_credit_flutter/widget/tableCalendar/table_calendar.dart';

/// @description 作用:班次查詢(xún)
/// @date: 2021/8/18
/// @author:盧融霜
class ShiftSearch extends StatefulWidget {
  ShiftSearch({Key key}) : super(key: key);

  @override
  _ShiftSearchState createState() => _ShiftSearchState();
}

class _ShiftSearchState extends State<ShiftSearch> {
  DateTime _focusedDay = DateTime.now();
  DateTime _rangeStart;
  DateTime _rangeEnd;
  DateTime _selectedDay;
  ValueNotifier<List<Event>> _selectedEvents;
  CalendarFormat _calendarFormat = CalendarFormat.month;
  RangeSelectionMode _rangeSelectionMode = RangeSelectionMode.toggledOff;

  @override
  void initState() {
    super.initState();
    _selectedDay = _focusedDay;
    _selectedEvents = ValueNotifier(_getEventsForDay(_selectedDay));
  }

  @override
  void dispose() {
    _selectedEvents.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BaseRoutesWidget(
      title: "班次查詢(xún)",
      child: Ink(
        color: const Color.fromRGBO(243, 244, 246, 1),
        child: SizedBox(
            height: double.infinity,
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(10.r))),
                    padding: EdgeInsets.only(bottom: 10.r),
                    margin: EdgeInsets.only(
                        left: 10.r, right: 10.r, top: 10.r, bottom: 5.r),
                    child: TableCalendar<Event>(
                      daysOfWeekHeight: 40.r,
                      daysOfWeekStyle: DaysOfWeekStyle(
                          decoration: BoxDecoration(
                              border: Border(
                                  bottom: BorderSide(
                                      color: const Color.fromRGBO(
                                          213, 213, 213, 1),
                                      width: 0.4.r)))),
                      locale: 'zh_CN',
                      firstDay: kFirstDay,
                      lastDay: kLastDay,
                      headerStyle: HeaderStyle(
                          titleTextStyle: TextStyle(fontSize: 15.r)),
                      focusedDay: _focusedDay,
                      selectedDayPredicate: (day) =>
                          isSameDay(_selectedDay, day),
                      rangeStartDay: _rangeStart,
                      rangeEndDay: _rangeEnd,
                      calendarFormat: _calendarFormat,
                      rangeSelectionMode: _rangeSelectionMode,
                      eventLoader: _getEventsForDay,
                      startingDayOfWeek: StartingDayOfWeek.monday,
                      calendarStyle: const CalendarStyle(
                          outsideDaysVisible: true,
                          selectedDecoration: BoxDecoration(
                              color: Color.fromRGBO(0, 122, 255, 1)),
                          todayDecoration: BoxDecoration(
                              color: Color.fromRGBO(0, 122, 255, 0.5)),
                          markersMaxCount: 1,
                          markersAutoAligned: false),
                      onDaySelected: _onDaySelected,
                      onRangeSelected: _onRangeSelected,
                      onFormatChanged: (format) {
                        if (_calendarFormat != format) {
                          setState(() {
                            _calendarFormat = format;
                          });
                        }
                      },
                      onPageChanged: (focusedDay) {
                        _focusedDay = focusedDay;
                      },
                      calendarBuilders: CalendarBuilders(markerBuilder:
                          (BuildContext context, DateTime day,
                              List<Event> events) {
                        List<Event> list = kEvents[day];
                        if (list != null) {
                          BoxDecoration decoration;

                          if (day.day == 19) {
                            decoration = const BoxDecoration(
                                shape: BoxShape.circle, color: Colors.red);
                          } else if (day.day == 18) {
                            decoration = const BoxDecoration(
                                shape: BoxShape.circle, color: Colors.blue);
                          } else {
                            decoration = const BoxDecoration(
                                shape: BoxShape.circle, color: Colors.black);
                          }
                          return Container(
                              width: 7.r,
                              height: 7.r,
                              margin: EdgeInsets.only(bottom: 4.r),
                              decoration: decoration);
                        }
                        return null;
                      }),
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    alignment: Alignment.topLeft,
                    padding: EdgeInsets.all(10.r),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(10.r))),
                    margin: EdgeInsets.only(
                        left: 10.r, right: 10.r, top: 10.r, bottom: 10.r),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "班次--早班",
                          style: TextStyle(
                              fontSize: 16.r,
                              color: const Color.fromRGBO(51, 51, 51, 1),
                              fontWeight: FontWeight.bold),
                        ),
                        Padding(
                            padding: EdgeInsets.only(top: 10.r),
                            child: ItemWidget("上班", "08:00:00")),
                        Padding(
                            padding: EdgeInsets.only(top: 0.r),
                            child: ItemWidget("下班", "17:00:00"))
                      ],
                    ),
                  )
                ],
              ),
            )),
      ),
    );
  }

  List<Event> _getEventsForDay(DateTime day) {
    // Implementation example
    return kEvents[day] ?? [];
  }

  void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
    if (!isSameDay(_selectedDay, selectedDay)) {
      setState(() {
        _selectedDay = selectedDay;
        _focusedDay = focusedDay;
        _rangeStart = null; // Important to clean those
        _rangeEnd = null;
        _rangeSelectionMode = RangeSelectionMode.toggledOff;
      });

      _selectedEvents.value = _getEventsForDay(selectedDay);
    }
  }

  void _onRangeSelected(DateTime start, DateTime end, DateTime focusedDay) {
    setState(() {
      _selectedDay = null;
      _focusedDay = focusedDay;
      _rangeStart = start;
      _rangeEnd = end;
      _rangeSelectionMode = RangeSelectionMode.toggledOn;
    });

    // `start` or `end` could be null
    if (start != null && end != null) {
      _selectedEvents.value = _getEventsForRange(start, end);
    } else if (start != null) {
      _selectedEvents.value = _getEventsForDay(start);
    } else if (end != null) {
      _selectedEvents.value = _getEventsForDay(end);
    }
  }

  List<Event> _getEventsForRange(DateTime start, DateTime end) {
    // Implementation example
    final days = daysInRange(start, end);

    return [
      for (final d in days) ..._getEventsForDay(d),
    ];
  }
}

class ItemWidget extends StatelessWidget {
  String title;
  String content;

  ItemWidget(this.title, this.content);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Column(
          children: [
            Container(
              width: 10.r,
              height: 10.r,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Color.fromRGBO(0, 136, 254, 1)),
            ),
            Container(
              width: 1.r,
              height: 50.r,
              color: const Color.fromRGBO(221, 221, 221, 1),
            )
          ],
        ),
        Padding(
          padding: EdgeInsets.only(left: 15.r, top: 0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                    height: 1,
                    color: const Color.fromRGBO(51, 51, 51, 1),
                    fontSize: 16.r),
              ),
              Text(
                content,
                style: TextStyle(
                    color: const Color.fromRGBO(102, 102, 102, 1),
                    fontSize: 14.r),
              )
            ],
          ),
        )
      ],
    );
  }
}

#依賴(lài)其他組件
#國(guó)際化
  intl: ^0.17.0
#手勢(shì)
  simple_gesture_detector: ^0.2.0

調(diào)整后的代碼：鏈接: https://pan.baidu.com/s/14rSacaAJ_hrHKgDtxhyF2A 提取碼: spye