calendar_view_demo/lib/calendar_view/mini_calendar/mini_calendar.dart

import 'package:calendar_view/calendar_controller/controller.dart';
import 'package:calendar_view/utils/calendar_util.dart';
import 'package:calendar_view/calendar_view/mini_calendar/mini_day_item.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MiniCalendar extends StatefulWidget {
  const MiniCalendar({super.key});

  @override
  State<MiniCalendar> createState() => _MiniCalendarState();
}

class _MiniCalendarState extends State<MiniCalendar> {
  String currYearMonth = ''; // 当前年月
  List<DayStructure> daysList = []; // 当前控制器的日期列表
  CalendarController calendarController = Get.find<CalendarController>();
  @override
  void initState() {
    super.initState();
    currYearMonth = calendarController.currentYearMonth;
    daysList = calendarController.daysList;
    calendarController.onDaysListChange.addListener(_onDaysListChange);
  }

  @override
  void dispose() {
    super.dispose();
    calendarController.onDaysListChange.removeListener(_onDaysListChange);
  }

  void _onDaysListChange(_, e) {
    setState(() {
      currYearMonth = calendarController.currentYearMonth;
      daysList = calendarController.daysList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildMiniCalendarTop(),
        _buildMiniCalendarBody(),
        const SizedBox(
          height: 10,
        ),
      ],
    );
  }

  Widget _buildMiniCalendarTop() {
    /// 按钮样式
    final iconButtonStyle = ButtonStyle(
      padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
          const EdgeInsets.all(0)),
      backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
      shadowColor: MaterialStateProperty.all<Color>(Colors.transparent),
      overlayColor: MaterialStateProperty.all<Color>(
          const Color.fromARGB(255, 224, 226, 228)),
      foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
      surfaceTintColor: MaterialStateProperty.all<Color>(Colors.white),
    );
    return SizedBox(
      height: 40,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          const SizedBox(
            width: 10,
          ),
          Text(
            currYearMonth,
            style: const TextStyle(
              fontSize: 16,
            ),
          ),
          Expanded(child: Container()),
          SizedBox(
            width: 32,
            height: 32,
            child: ElevatedButton(
              style: iconButtonStyle,
              onPressed: calendarController.handleLastMonth,
              child: const Icon(
                Icons.keyboard_arrow_left,
                size: 20,
                color: Colors.black38,
              ),
            ),
          ),
          SizedBox(
            width: 32,
            height: 32,
            child: ElevatedButton(
              style: iconButtonStyle,
              onPressed: calendarController.handleNextMonth,
              child: const Icon(
                Icons.keyboard_arrow_right,
                size: 20,
                color: Colors.black38,
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildMiniCalendarBody() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 5),
      child: Column(
        children: <Widget>[
          _buildMiniCalendarWeekTitle(),
          const SizedBox(
            height: 5,
          ),
          _buildMiniCalendarDaysBody(),
        ],
      ),
    );
  }

  /// 构建「日、一、二、三、四、五、六」的标题
  Widget _buildMiniCalendarWeekTitle() {
    return Container(
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          /// TODO[Gavin]: i18n
          _buildEachTitle('日'),
          _buildEachTitle('一'),
          _buildEachTitle('二'),
          _buildEachTitle('三'),
          _buildEachTitle('四'),
          _buildEachTitle('五'),
          _buildEachTitle('六'),
        ],
      ),
    );
  }

  Widget _buildEachTitle(String title) {
    const weekTextStyle = TextStyle(fontSize: 12, color: Colors.black54);
    return SizedBox(
      width: 25,
      child: Text(
        title,
        style: weekTextStyle,
        textAlign: TextAlign.center,
      ),
    );
  }

  /// 构建日历主体
  Widget _buildMiniCalendarDaysBody() {
    // 将35天分成5个周
    final weeksInMonth = <List<DayStructure>>[];
    for (var i = 0; i < daysList.length; i += 7) {
      weeksInMonth.add(daysList.sublist(i, i + 7));
    }
    return SizedBox(
      child: Column(
        children: weeksInMonth.map(_buildMiniCalendarDayRow).toList(),
      ),
    );
  }

  /// 构建每一行（周）
  Widget _buildMiniCalendarDayRow(List<DayStructure> sevenDays) {
    return Container(
      height: 32,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: sevenDays.map(_buildEachDay).toList(),
      ),
    );
  }

  /// 构建每一天
  Widget _buildEachDay(DayStructure day) {
    return MiniDayItem(
      dayData: day,
      onSelect: (v) => calendarController.handleSelectedDayByIndex(v),
    );
  }
}