广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter 日历组件简单实现
  • 516
分享到

Flutter 日历组件简单实现

Flutter 日历组件Flutter 日历 2022-11-13 14:11:16 516人浏览 独家记忆
摘要

目录前言安装效果demo 演示业务使用 headerView使用配置属性DEMO感谢前言 近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下: 仅支持从明天开始

前言

近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下:

  • 仅支持从明天开始选择预定日期
  • 仅支持可选范围内的日期
  • 日期的选择是连续的
  • 有个推荐日期,需要联动更新
  • todo:
    • 支持不连续的日期选择

GitHub:tw_calendar

安装

dependencies:
  tw_calendar: latest_version

效果

demo 演示

业务使用 headerView

使用

配置属性

 /// 开始的年月份
  final DateTime firstDate;
  /// 结束的年月份
  final DateTime lastDate;
  /// 选择开始日期
  final DateTime? selectedStartDate;
  /// 选择结束日期
  final DateTime? selectedEndDate;
  /// 点击方法回调
  final Function? onSelectFinish;
  /// 头部组件
  final Widget? headerView;
  /// 选择模式
  final TWCalendarListSeletedMode? seletedMode;
  /// 月视图高度,为空则占满剩余空间
  final double? monthBodyHeight;
  /// 周视图高度, 默认 48
  final double? weekDayHeight;
  /// 水平间隙
  final double? horizontalSpace;
  /// 确认周视图高度, 默认 66
  final double? ensureViewHeight;
  /// 确认按钮的间隙
  final EdgeInsetsGeometry? ensureViewPadding;
  /// 确认按钮选中颜色
  final Color? ensureViewSelectedColor;
  /// 确认未按钮选中颜色
  final Color? ensureViewUnSelectedColor;
  /// 今天的日期的背景颜色
  final Color? dayNumberTodayColor;
  /// 选中日期背景颜色
  final Color? dayNumberSelectedColor;
  /// 确认按钮字体大小
  final double? ensureTitleFontSize;
  /// 点击回调
  final void Function(DateTime seletedDate, int seletedDays)? onSelectDayRang;
  /// 选择确认按钮 title 回调
  final String Function(
          DateTime? selectStartTime, DateTime? selectEndTime, int seletedDays)?
      onSelectDayTitle;

DEMO

TWCalendarList(
      firstDate: TWCalendartool.tomorrow,
      lastDate: DateTime(2022, 11, 21),
      selectedStartDate: DateTime(2022, 9, 2),
      selectedEndDate: DateTime(2022, 9, 10),
      monthBodyHeight: 300.w,
      seletedMode: TWCalendarListSeletedMode.singleSerial,
      headerView: Container(
        alignment: Alignment.center,
        height: 55.w,
        child: Text(
          '日历组件',
          style: TextStyle(
            color: TWColors.tw333333,
            fontSize: 18.w,
          ),
        ),
      ),
      onSelectDayRang: ((seletedDate, seletedDays) {
        print('seletedDate : $seletedDate, seletedDays : $seletedDays');
      }),
      onSelectFinish: (selectStartTime, selectEndTime) {
        print(
            'selectStartTime : $selectStartTime, selectEndTime : $selectEndTime');
        Navigator.pop(context);
      },
    )

感谢

参考及修改至 demo: Flutter_calendar_list

以上就是Flutter 日历组件简单实现的详细内容,更多关于Flutter 日历组件的资料请关注编程网其它相关文章!

--结束END--

本文标题: Flutter 日历组件简单实现

本文链接: https://www.lsjlt.com/news/171864.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter 日历组件简单实现
    目录前言安装效果demo 演示业务使用 headerView使用配置属性DEMO感谢前言 近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下: 仅支持从明天开始...
    99+
    2022-11-13
    Flutter 日历组件 Flutter 日历
  • js实现简单日历效果
    本文实例为大家分享了js实现简单日历效果的具体代码,供大家参考,具体内容如下 ## css模块 <style type="text/css"> *{ ma...
    99+
    2022-11-12
  • vue实现日历组件
    基于VUE实现日历组件,供大家参考,具体内容如下 年和月份是使用输入框来切换的,没有做成选择框,⬅️和➡️切换月份,红色选取是选取的日期实现思路和网上的大多数一样,首先是把月份的天...
    99+
    2022-11-13
  • java简单实现自定义日历
    本文实例为大家分享了java自定义日历的具体代码,供大家参考,具体内容如下 效果图: 源码: package com.example; import java.text.Simp...
    99+
    2022-11-13
  • Java实现简单的日历界面
    本文实例为大家分享了Java实现简单日历界面的具体代码,供大家参考,具体内容如下 请使用JFrame、JPanel、JButton、JLabel和不同的布局管理器,实现如下日历视图。...
    99+
    2022-11-13
  • Android Studio简单实现自定义日历
    本文实例为大家分享了Android Studio自定义日历的具体代码,供大家参考,具体内容如下 效果图: 目录树 1.DayBean.java用来存储每天的信息 package ...
    99+
    2022-11-13
  • JavaScript代码实现简单日历效果
    本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 效果如下: 代码: <!DOCTYPE html> <html ...
    99+
    2022-11-12
  • js+html+css实现简单日历效果
    本文实例为大家分享了js+html+css实现简单日历效果的具体代码,供大家参考,具体内容如下 效果: 遇到的问题与解决方法: 1.“日”上移 方法:在&l...
    99+
    2022-11-13
  • HTML+CSS+JavaScript实现简单日历效果
    本文实例为大家分享了HTML+CSS+JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 初学前端花了一下午写了一个简单的日历效果: 可以选择按月或者按年切换,...
    99+
    2022-11-13
  • 使用Vue实现简单日历效果
    使用Vue实现简单的日历,供大家参考,具体内容如下 原理分析: 1.获取当前时间2.显示当前时间3.点击增加和减少月份4.大月和小月的天数 效果演示 初始样式(显示现在的日期时间) ...
    99+
    2022-11-13
  • js如何实现日历的简单算法
    这篇文章将为大家详细讲解有关js如何实现日历的简单算法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近有用到日历可需要编辑文本的日历,为了...
    99+
    2022-10-19
  • Java如何实现简单的日历界面
    本文小编为大家详细介绍“Java如何实现简单的日历界面”,内容详细,步骤清晰,细节处理妥当,希望这篇“Java如何实现简单的日历界面”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。请使用JFrame、JPanel、...
    99+
    2023-07-02
  • 如何实现vue日历组件
    这篇文章主要介绍了如何实现vue日历组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 前言最近做项目遇到一个需求,需要制作一个定制化的日历组件(项目使用的UI框架不能满...
    99+
    2023-06-29
  • Android使用GridView实现日历的简单功能
    简单的日历实现,只是显示了每一个月,没有显示当天和记事这些功能 主要是计算月初是周几,月末是周几,然后相应的显示上一月多少天和下一月多少天。 先看一下关于日期的用到的几个工具...
    99+
    2022-06-06
    gridview Android
  • 微信小程序实现简单日历效果
    本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下 效果: wxml: <!-- 日历 -->         <view class...
    99+
    2022-11-13
  • vue版日历组件的实现方法
    开发背景 常用日历组件可能满足不了我们自定义的多种需求(比如样式),因此通常情况下我们可能需要自己手动开发款日历,先上图 开发流程 1. 根据常用日历样式,我们template部分...
    99+
    2022-11-13
  • 基于vue2实现一个日历组件
    目录QCalendar.scssgetRangeDay.jsformatTime.jsQCalendar.vue日历组件效果图日月年tips总结不用任何第三方库,只基于vue2实现一...
    99+
    2022-12-29
    vue日历组件 切换月周日都可选择 vue 日历 Vue 日程日历
  • vue的h5日历组件实现详解
    本文实例为大家分享了vue的h5日历组件实现代码,供大家参考,具体内容如下 日历样式自定义 日历组件 <template>   <section class="...
    99+
    2022-11-13
  • Python数组遍历的简单实现方法小结
    本文实例总结了Python数组遍历的简单实现方法。分享给大家供大家参考,具体如下: >>> os.__file__.split('\') ['E:', 'Python', 'Pyth...
    99+
    2022-06-04
    遍历 数组 小结
  • flutter实现下拉菜单组件——基于PopupMenuButton
    问题背景 客户端日常开发和学习过程,下拉菜单是一个很常见的组件,本文主要介绍flutter中实现下拉菜单组件的一个方案,基于PopupMenuButton来进行实现。 问题分析 PopupMenuButton PopupM...
    99+
    2023-10-22
    flutter android ios
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作