calendar_view_demo/lib/calendar_page/calendar_main_panel.dart

import 'package:calendar_view/calendar_controller/controller.dart';
import 'package:calendar_view/calendar_page/calendar_views/calendar_month_view.dart';
import 'package:calendar_view/calendar_page/my_calendar/my_calendar.dart';
import 'package:calendar_view/popup_layer/popup_layer.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

/// 日历视图主体面板
class CalendarMainPanel extends StatefulWidget {
  const CalendarMainPanel({super.key});

  @override
  State<CalendarMainPanel> createState() => _CalendarMainPanelState();
}

enum CalendarViewType { month, week, day, list }

class _CalendarMainPanelState extends State<CalendarMainPanel> {
  /// TODO:[Gavin] 将 _viewType 也收入到 CalendarController 中
  final CalendarViewType _viewType = CalendarViewType.month;
  String _currYearMonthStr = ''; // 当前年月
  bool _isToday = true; // 是否是今天
  CalendarController calendarController = Get.find<CalendarController>();
  @override
  void initState() {
    super.initState();
    _isToday = calendarController.isToday;
    _currYearMonthStr = calendarController.currentYearMonth;
    calendarController.onDaysListChange.addListener(_onDaysListChange);
  }

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

  void _onDaysListChange(_, e) {
    setState(() {
      _isToday = calendarController.isToday;
      _currYearMonthStr = calendarController.currentYearMonth;
    });
  }

  /// 按钮样式
  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),
  );

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        border: Border(
          right: BorderSide(
            color: Colors.black12,
            width: 1,
          ),
        ),
        // color: const Color.fromARGB(90, 59, 255, 124),
      ),
      child: Column(
        children: <Widget>[
          _buildMainPanelTop(),
          Expanded(
            child: Stack(
              children: [
                _buildMainView(_viewType),
                const PopupLayer(),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 构建顶部【今天、年月、视图切换器、更多】
  Widget _buildMainPanelTop() {
    return SizedBox(
      height: 70,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            _buildTodayButton(),
            _buildChangeMonthButtons(),
            _buildYearAndMonth(),
            Expanded(
              child: Container(),
            ),
            _buildMoreButton(),
          ],
        ),
      ),
    );
  }

  /// 【回到今天】按钮
  Widget _buildTodayButton() {
    return SizedBox(
      width: 50,
      height: 32,
      child: OutlinedButton(
        style: ButtonStyle(
          overlayColor: MaterialStateProperty.all<Color>(
              const Color.fromARGB(255, 235, 235, 235)),
          foregroundColor: MaterialStateProperty.all<Color>(
              _isToday ? Colors.black26 : Colors.black),
          backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
          padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
              const EdgeInsets.all(0)),
          shadowColor: MaterialStateProperty.all<Color>(Colors.transparent),
        ),
        onPressed: _isToday ? null : calendarController.selectToday,
        // TODO[Gavin]: i18n
        child: const Text('今天'),
      ),
    );
  }

  /// 【上个月、下个月】按钮
  Widget _buildChangeMonthButtons() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 5),
      height: 40,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          SizedBox(
            width: 32,
            height: 32,
            child: ElevatedButton(
              style: iconButtonStyle,
              onPressed: () => calendarController.handleLastMonth(true),
              child: const Icon(
                Icons.keyboard_arrow_left,
                size: 20,
                color: Colors.black,
              ),
            ),
          ),
          SizedBox(
            width: 32,
            height: 32,
            child: ElevatedButton(
              style: iconButtonStyle,
              onPressed: () => calendarController.handleNextMonth(true),
              child: const Icon(
                Icons.keyboard_arrow_right,
                size: 20,
                color: Colors.black,
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 年月
  Widget _buildYearAndMonth() {
    return Align(
      alignment: Alignment.center,
      child: Text(
        _currYearMonthStr,
        style: const TextStyle(
          height: 1.2,
          fontSize: 18,
        ),
      ),
    );
  }

  /// 【更多】按钮
  Widget _buildMoreButton() {
    return SizedBox(
      width: 50,
      height: 32,
      child: ElevatedButton(
        style: iconButtonStyle,
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(
              duration: Duration(milliseconds: 500),
              content: Text('前方正在施工'),
            ),
          );
        },
        // TODO[Gavin]: i18n
        child: const Center(
          child: Icon(
            Icons.more_horiz,
            size: 20,
            color: Color.fromARGB(255, 116, 118, 119),
          ),
        ),
      ),
    );
  }

  /// 构建视图主体
  Widget _buildMainView(CalendarViewType type) {
    switch (type) {
      case CalendarViewType.month:
        return const CalendarMonthView();
      // TODO 周视图
      case CalendarViewType.week:
        return const MyCalendar();
      // TODO 日视图
      case CalendarViewType.day:
        return const MyCalendar();
      // TODO 列表视图
      case CalendarViewType.list:
        return const MyCalendar();
      default:
        return const CalendarMonthView();
    }
  }
}