calendar_view_demo/lib/calendar_page/month_calendar/schedule_popup.dart

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

class SchedulePopup extends StatefulWidget {
  const SchedulePopup({
    Key? key,
    required this.scheduleData,
    required this.onClose,
  }) : super(key: key);

  /// 日程数据
  final Schedule scheduleData;

  final VoidCallback onClose;

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

class SchedulePopupState extends State<SchedulePopup> {
  CalendarController calendarController = Get.find<CalendarController>();
  @override
  void initState() {
    super.initState();
  }

  @override
  void didUpdateWidget(covariant SchedulePopup oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: [
        _buildScheduleDetailCard(),
      ],
    );
  }

  /// 构建icon
  Widget _buildIcon({
    required IconData icon,
    required double size,
  }) {
    return Icon(
      icon,
      size: size,
      color: const Color.fromRGBO(116, 118, 119, 1),
    );
  }

  /// 构建icon按钮
  Widget _buildIconButton({
    required VoidCallback onPressed,
    required IconData icon,
  }) {
    return Material(
      color: Colors.transparent,
      child: IconButton(
        splashRadius: 20,
        onPressed: onPressed,
        icon: _buildIcon(
          icon: icon,
          size: 20,
        ),
      ),
    );
  }

  Map<int, String> weekMap = {
    1: '周一',
    2: '周二',
    3: '周三',
    4: '周四',
    5: '周五',
    6: '周六',
    7: '周日',
  };

  /// 日程卡片视图列表
  Widget _buildScheduleDetailCard() {
    final currentDate = widget.scheduleData.day;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: Column(
            children: [
              _buildScheduleHeadActionBar(),
              _buildScheduleLayoutItem(
                iconWidget: const SizedBox(
                  width: 18,
                  child: CircleAvatar(
                    radius: 6,
                    backgroundColor: Colors.red,
                  ),
                ),
                scheduleItemWidget: const Text(
                  '杏聆荟每日站会',
                ),
              ),
              _buildScheduleLayoutItem(
                iconWidget: _buildIcon(
                  icon: Icons.av_timer_rounded,
                  size: 18,
                ),
                scheduleItemWidget: Text(
                  '${currentDate.month}月${currentDate.day}日 ${weekMap[currentDate.weekday]!} 10:00-10:30',
                ),
              ),
              _buildScheduleLayoutItem(
                iconWidget: _buildIcon(
                  icon: Icons.personal_injury_rounded,
                  size: 18,
                ),
                scheduleItemWidget: const Text('组织人'),
              ),
              _buildScheduleLayoutItem(
                iconWidget: _buildIcon(
                  icon: Icons.people_alt_outlined,
                  size: 18,
                ),
                scheduleItemWidget: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: const [
                    Text(
                      '邀请7人，5人接受',
                    ),
                    Expanded(child: SizedBox()),
                    Text(
                      '查看全部',
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const SizedBox(
                    width: 30,
                  ),
                  _buildHeadPortraitItem(),
                  _buildHeadPortraitItem(),
                  _buildHeadPortraitItem(),
                  _buildHeadPortraitItem(),
                  _buildHeadPortraitItem(),
                ],
              ),
            ],
          ),
        ),
        const SizedBox(
          height: 15,
        ),
        Container(
          decoration: const BoxDecoration(
            border: Border(
              top: BorderSide(
                color: Color.fromRGBO(238, 238, 238, 1),
                width: 1,
              ),
            ),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: _buildSchedulebottomActionBar(),
        ),
      ],
    );
  }

  /// 日程卡片顶部操作栏
  Widget _buildScheduleHeadActionBar() {
    return SizedBox(
      height: 50,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          _buildIconButton(
            onPressed: () {
              print('ddddd');
            },
            icon: Icons.delete_outlined,
          ),
          _buildIconButton(
            onPressed: () {},
            icon: Icons.launch_rounded,
          ),
          _buildIconButton(
            onPressed: () {
              widget.onClose.call();
            },
            icon: Icons.close,
          ),
        ],
      ),
    );
  }

  /// 日程卡片底部操作栏
  Widget _buildSchedulebottomActionBar() {
    return SizedBox(
      height: 50,
      child: Row(
        children: [
          SizedBox(
            width: 10,
          ),
          const Text(
            '查看详情',
            style: TextStyle(
              color: Colors.black54,
            ),
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                _buildIconButton(
                  onPressed: () {},
                  icon: Icons.check_circle_outlined,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 日程卡片单行布局
  Widget _buildScheduleLayoutItem({
    required Widget iconWidget,
    required Widget scheduleItemWidget,
  }) {
    return Container(
      padding: const EdgeInsets.only(
        left: 10,
        bottom: 10,
        right: 10,
      ),
      child: Row(
        children: [
          Container(
            margin: const EdgeInsets.only(
              left: 5,
              right: 10,
            ),
            child: iconWidget,
          ),
          Expanded(child: scheduleItemWidget),
        ],
      ),
    );
  }

  Widget _buildHeadPortraitItem() {
    return SizedBox(
      width: 55,
      height: 55,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 30,
            height: 30,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(
                4,
              ),
              color: const Color.fromARGB(255, 41, 42, 54),
            ),
            child: const FlutterLogo(
              size: 28,
            ),
          ),
          const SizedBox(
            height: 5,
          ),
          const Text(
            '路人甲',
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}