`
iaiai
  • 浏览: 2197855 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flutter -自定义日历组件

 
阅读更多


颜色文件和屏幕适配的文件 可以自己给定
import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_xiaoe/utils/ScreenUtil.dart';
import 'package:flutter/material.dart';
import 'package:flutter_xiaoe/utils/TimeUtil.dart';
import 'package:flutter_xiaoe/widgets/common/calendar/DayGridView.dart';
import 'package:flutter_xiaoe/config/Colors.dart';

class Calendar extends StatefulWidget {
  DateTime initTime;
  DateTime firstTime;
  DateTime endTime;
  ValueChanged onChange;

  Calendar({
    Key key,
    this.initTime,
    this.firstTime,
    this.endTime,
    this.onChange,
  }) : super(key: key);

  @override
  State<Calendar> createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {
  PageController pageController;
  DateTime selectDate;
  int initPage = 0;
  int totalPage = 0;

  @override
  void initState() {
    super.initState();
    print(widget.firstTime.month);
    selectDate = widget.initTime;

    /// 总共的月份数目
    totalPage = (widget.endTime.year - widget.firstTime.year == 0
        ? widget.endTime.month
        : ((widget.endTime.year - widget.firstTime.year) * 12 +
            widget.endTime.month -
            widget.firstTime.month +
            1));

    /// 当前月份处于
    initPage = (widget.initTime.year - widget.firstTime.year == 0
        ? widget.initTime.month
        : ((widget.initTime.year - widget.firstTime.year) * 12 +
            widget.initTime.month -
            widget.firstTime.month +
            1));
    print(totalPage);
    print(initPage);
    pageController = PageController(
      initialPage: totalPage,
    );
  }

  onChange(time) {
    if (selectDate != time) {
      setState(() {
        selectDate = time;
        widget.onChange(time);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: TimeUtil.getDayHeaders(MaterialLocalizations.of(context)),
      ),
      Container(
        color: AppColors.WHITE,
        height: ScreenUtil.px2pt(600),
        child: PageView.builder(
          itemBuilder: (BuildContext context, int index) {
            return DayGridView(
              initDate: DateTime(widget.initTime.year, widget.initTime.month,
                  widget.initTime.day),
              selectDate:
                  DateTime(selectDate.year, selectDate.month, selectDate.day),
              year: widget.firstTime.year +
                  ((widget.firstTime.month + index - 1) / 12).floor(),
              month: (widget.firstTime.month + index) % 12 == 0
                  ? 12
                  : (widget.firstTime.month + index) % 12,
              onChange: onChange,
            );
          },
          itemCount: totalPage,
          controller: pageController,
        ),
      ),
    ]);
  }
}


import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_xiaoe/utils/ScreenUtil.dart';
import 'package:flutter_xiaoe/utils/NetUtil.dart';
import 'package:flutter_xiaoe/config/Api.dart';
import 'package:flutter_xiaoe/config/Colors.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:flutter_xiaoe/utils/TimeUtil.dart';

class DayGridView extends StatefulWidget {
  DateTime initDate;
  DateTime selectDate;
  int year;
  int month;
  ValueChanged onChange;

  DayGridView({
    Key key,
    @required this.initDate,
    @required this.selectDate,
    @required this.year,
    @required this.month,
    this.onChange,
  });

  @override
  State<DayGridView> createState() => _DayGridViewState();
}

class _DayGridViewState extends State<DayGridView> {
  @override
  void initState() {
    super.initState();
  }

  List<Widget> dayItems() {
    List days = TimeUtil.getDay(
        widget.year, widget.month, MaterialLocalizations.of(context));
    List dayWidgets = days.map((value) {
      if (value is int) {
        return Container();
      }
      if (value == widget.selectDate) {
        return GestureDetector(
          onTap: () {
            widget.onChange(widget.selectDate);
          },
          child: Container(
            color: AppColors.WHITE,
            alignment: Alignment.center,
            child: Container(
              width: ScreenUtil.px2pt(60),
              height: ScreenUtil.px2pt(60),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: AppColors.BLUE_TEXT,
                borderRadius: BorderRadius.all(Radius.circular(100)),
              ),
              child: Text(
                value.day.toString(),
                style: TextStyle(color: AppColors.WHITE),
              ),
            ),
          ),
        );
      } else {
        if (value == widget.initDate) {
          return GestureDetector(
            onTap: () {
              widget.onChange(widget.initDate);
            },
            child: Container(
                color: AppColors.WHITE,
                alignment: Alignment.center,
                child: Text(
                  value.day.toString(),
                  style: TextStyle(color: AppColors.BLUE_TEXT),
                )),
          );
        } else {
          if (value.isAfter(widget.initDate)) {
            /// 在今天之后的时间无法点击
            return GestureDetector(
              child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    value.day.toString(),
                    style: TextStyle(color: AppColors.BLACK3),
                  )),
            );
          } else {
            /// 在今天之前的时间可以点击
            return GestureDetector(
              onTap: () {
                widget.onChange(value);
              },
              child: Container(
                  color: AppColors.WHITE,
                  alignment: Alignment.center,
                  child: Container(
                    child: Text(
                      value.day.toString(),
                      style: TextStyle(color: AppColors.BLACK1),
                    ),
                  )),
            );
          }
        }
      }
    }).toList();
    return dayWidgets;
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> list = dayItems();
    return Container(
      height: ScreenUtil.px2pt(600),
      child: GridView.custom(
          gridDelegate:
          _DayPickerGridDelegate(mainAxisNumber: list.length > 35 ? 6 : 5),
          physics: NeverScrollableScrollPhysics(),
          padding: EdgeInsets.all(0),
          childrenDelegate:
          SliverChildListDelegate(list, addRepaintBoundaries: false)),
    );
  }
}

/// 自定义GridView
class _DayPickerGridDelegate extends SliverGridDelegate {
  final int mainAxisNumber;

  const _DayPickerGridDelegate({
    this.mainAxisNumber,
  });

  @override
  SliverGridLayout getLayout(SliverConstraints constraints) {
    const int columnCount = DateTime.daysPerWeek;
    final double tileWidth = constraints.crossAxisExtent / columnCount;
    final double tileHeight = ScreenUtil.px2pt(600) / mainAxisNumber;
    return SliverGridRegularTileLayout(
      crossAxisCount: columnCount,
      mainAxisStride: tileHeight,
      crossAxisStride: tileWidth,
      childMainAxisExtent: tileHeight,
      childCrossAxisExtent: tileWidth,
      reverseCrossAxis: axisDirectionIsReversed(constraints.crossAxisDirection),
    );
  }

  @override
  bool shouldRelayout(_DayPickerGridDelegate oldDelegate) => false;
}

const _DayPickerGridDelegate _kDayPickerGridDelegate = _DayPickerGridDelegate();


import 'package:flutter/cupertino.dart';
import 'package:flutter_xiaoe/utils/ScreenUtil.dart';
import 'package:flutter_xiaoe/utils/NetUtil.dart';
import 'package:flutter_xiaoe/config/Api.dart';
import 'package:flutter_xiaoe/config/Colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_xiaoe/widgets/login/ImageInputWidget.dart';
import 'package:flutter_xiaoe/config/Constant.dart';
import 'package:flutter_xiaoe/config/ImageConfig.dart';
import 'package:flutter_xiaoe/widgets/common/ShadowContainer.dart';
import 'package:flutter_xiaoe/widgets/login/GradientButton.dart';
import 'package:flutter_xiaoe/widgets/common/Header.dart';

class TimeUtil {
  static const List<int> _daysInMonth = <int>[
    31,
    -1,
    31,
    30,
    31,
    30,
    31,
    31,
    30,
    31,
    30,
    31
  ];

  /// 获取这个月的天数
  static int getDaysInMonth(int year, int month) {
    if (month == DateTime.february) {
      final bool isLeapYear =
          (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0);
      if (isLeapYear) return 29;
      return 28;
    }
    return _daysInMonth[month-1];
  }

  /// 获取周Header
  static List<Widget> getDayHeaders(MaterialLocalizations localizations) {
    List<Widget> list = [];
    for (int i = localizations.firstDayOfWeekIndex; true; i = (i + 1) % 7) {
      final String weekday = localizations.narrowWeekdays[i];
      list.add(Flexible(
          child: Container(
        height: ScreenUtil.px2pt(80),
        child: Center(
          child: Text(
            weekday,
            style: TextStyle(
              color: AppColors.BLACK1,
              fontSize: ScreenUtil.px2ptFont(34),
            ),
          ),
        ),
      )));
      if (i == (localizations.firstDayOfWeekIndex - 1) % 7) break;
    }
    return list;
  }

  /// 得到这个月的第一天是星期几(0 是 星期日 1 是 星期一...)
  static int computeFirstDayOffset(
      int year, int month, MaterialLocalizations localizations) {
    // 0-based day of week, with 0 representing Monday.
    final int weekdayFromMonday = DateTime(year, month).weekday - 1;
    // 0-based day of week, with 0 representing Sunday.
    final int firstDayOfWeekFromSunday = localizations.firstDayOfWeekIndex;
    // firstDayOfWeekFromSunday recomputed to be Monday-based
    final int firstDayOfWeekFromMonday = (firstDayOfWeekFromSunday - 1) % 7;
    // Number of days between the first day of week appearing on the calendar,
    // and the day corresponding to the 1-st of the month.
    return (weekdayFromMonday - firstDayOfWeekFromMonday) % 7;
  }

  /// 获取天
  static List getDay(int year, int month, MaterialLocalizations localizations) {
    List labels = [];
    final int daysInMonth = getDaysInMonth(year, month);
    final int firstDayOffset =
        computeFirstDayOffset(year, month, localizations);
    for (int i = 0; true; i += 1) {
      // 1-based day of month, e.g. 1-31 for January, and 1-29 for February on
      // a leap year.
      final int day = i - firstDayOffset + 1;
      if (day > daysInMonth) break;
      if (day < 1) {
        labels.add(0);
      } else {
        labels.add(DateTime(year, month, day));
      }
    }
    return labels;
  }
}

分享到:
评论

相关推荐

    Flutter上的一个日历控件可以定制成自己想要的样子

    `flutter_custom_calendar`是一个专门为Flutter设计的库,它提供了一个高度可定制的日历组件,使得开发者能够轻松地调整日历的外观和行为。 首先,`flutter_customalendar`库的核心特性在于其灵活性。它允许开发者...

    Flutter高阶技术:如何实现自定义日期选择器

    `CalendarPainter`允许我们自定义日历的样式,包括日期的大小、颜色、背景等。我们可以根据设计需求调整这些属性,实现一个符合应用风格的日期选择器。 对于多国际语言支持,我们需要利用Flutter的`intl`库。这个库...

    month-header-customization-flutter-event-calendar:如何在Flutter事件日历(SfCalendar)中使用自定义构建器自定义月份标题

    在Flutter开发中,SfCalendar是一款强大的日历组件,它提供了丰富的功能,如显示日程、自定义样式等。在创建具有个性化用户体验的应用时,有时我们需要对日历的某些部分进行自定义,例如月份标题。本篇文章将深入...

    自定义日历可把某一天圈起来

    在IT行业中,自定义日历功能是许多应用和软件中不可或缺的一部分,特别是在时间管理、计划安排和事件提醒方面。这个自定义日历的功能允许用户按照个人需求对特定日期进行标记,比如将重要的日子圈起来,以提高视觉...

    自定义 移动端 日历插件

    本文将深入探讨如何实现一个可完全自定义的移动端日历插件,结合给定的“日历插件”和“自定义日历”标签,我们将围绕这个主题进行详细的讲解。 首先,我们需要理解移动端日历插件的基本构成。它通常包括日期展示、...

    可以水平滑动的flutter日历小部件

    在自定义日历样式方面,Flutter提供了丰富的样式和主题选项。我们可以使用`Container`、`Padding`、`Align`等组件来布局元素,用`Text`来显示日期,用`Color`和`TextStyle`来设置颜色和字体样式。此外,`ClipRRect`...

    自定义日历控件

    在IT行业中,自定义日历控件是一种常见的需求,特别是在开发具有特定用户界面或功能的移动应用和Web应用时。自定义日历控件允许开发者根据项目需求来定制日历的样式、行为以及交互方式,以提供更好的用户体验。本文...

    highlight-the-tapped-view-header-flutter-calendar:如何在Flutter日历中突出显示被点击的视图标题

    Flutter允许我们通过`titleWidget`属性自定义日历的标题。根据`_selectedDate`的值,我们可以创建一个条件式来决定是否高亮标题: ```dart @override Widget build(BuildContext context) { return Scaffold( ...

    仿小米,cal日历切换效果

    - 对于移动端应用,如果是基于Android,可以使用Java或Kotlin进行开发,使用`CalendarView`或者自定义`ViewGroup`来实现日历控件。对于iOS,可以使用Swift或Objective-C,通过`UIPickerView`或者自定义`...

    Flutter高阶技术:如何实现自定义日期选择器(预订航班)

    `flutter_rdate_popup_picker`库中的`RdatePopupPicker`是核心组件,它提供了日期选择功能。我们需要配置其参数,如开始和结束日期、日期格式等,并设置回调函数来处理选中日期的变化。 6. **动画效果**: ...

    开发常用的日历控件(支持移动端)

    在开发过程中,日历控件是一个非常常见的组件,尤其在移动端应用中,用户往往需要查看、选择或管理日期。为了创建一个支持移动端的日历控件,开发者需要掌握以下几个关键知识点: 1. **跨平台开发**:为了确保日历...

    关于日历的输入

    在IT行业中,日历组件是用户界面中常见且重要的元素之一,它主要用于处理与日期和时间相关的用户交互。"关于日历的输入"这个话题主要关注如何在应用程序中实现一个功能丰富的日历选择器,例如timepick。在描述中提到...

    CalendarExaple-master仿钉钉、小米日历

    【标题】"CalendarExample-master仿钉钉、小米日历"是一个Android开发项目,旨在实现类似...通过研究这个项目,可以学习到如何创建自定义的日历视图,以及如何结合手势操作和ListView来打造一个功能完备的日历应用。

    flutter快速学习项目源码、快速集成企业ERP、OA等信息。flutter初学快速入门、flutter毕业设计,

    flutter快速学习项目源码、快速集成企业ERP、OA、HR等信息平台。 flutter初学快速入门、flutter毕业设计, ...自定义简易日历 曲线图及饼状图 模块化路由管理 更多Demo(水波纹动画、刮刮卡、lottie) 更多的细节优化

    带标记的简易日历

    【标题】"带标记的简易日历"是一个项目,它可能是一个日历应用或库的示例,旨在提供一种简洁的方式展示日期,并且允许用户在特定...通过学习和研究LHQCalendarDemo,开发者可以了解如何构建类似功能的自定义日历组件。

    日历小Demo

    1. **日历组件**:日历组件是用户界面中的一个元素,通常用于显示日期、选择日期或进行时间管理。在这个项目中,日历小Demo可能通过编程语言(如Java、Swift或JavaScript)实现了一个自定义的日历视图,能够展示一个...

    calendar_appbar:带有日历的自定义AppBar小部件的Flutter包

    【calendar_appbar】是一款专为Flutter开发者设计的自定义AppBar组件,它集成了一项独特的功能——日历视图。这个小部件使得用户在顶部导航栏就能方便地浏览和选择日期,提高了应用程序的用户体验,尤其适用于那些...

    携程阿里旅行日历选择

    1. **日历组件**:日历选择功能通常依赖于特定的日历UI组件。开发者可以选择系统内置的日历控件,如Android的`CalendarView`或iOS的`UIDatePicker`,或者自定义设计以满足特定的交互需求。例如,携程和阿里旅行可能...

    CalendarConceptUI的Flutter实现

    本篇文章将详细探讨如何使用Flutter框架来实现一个类似"Calendar Concept UI"的高级日历组件。 【描述】:Flutter作为Google推出的一款跨平台UI工具包,以其高效、灵活的特性深受开发者喜爱。"Calendar Concept UI...

    毕业论文-基于Flutter的宠物托管服务APP的设计与实现(万字最终稿)

    Flutter提供了丰富的组件库和强大的性能,使得开发过程高效且灵活。此外,为了实现本地数据存储,应用内采用了SQLite数据库,方便用户在离线状态下也能访问和管理宠物信息。 3 系统架构 系统整体架构分为三个主要...

Global site tag (gtag.js) - Google Analytics