【Flutter】Flutter 使用 table_calendar 实现自定义日历

news2024/11/17 5:25:00

【Flutter】Flutter 使用 table_calendar 实现自定义日历

文章目录

    • 一、前言
    • 二、安装和基本使用
    • 三、日历的交互性
    • 四、日历事件
    • 五、自定义 UI 和 CalendarBuilders
    • 六、本地化和语言设置
    • 七、完整实际业务代码示例

一、前言

你好!今天我要为你介绍一个非常实用的 Flutter 日历组件——table_calendar。这个组件不仅功能强大、高度可定制,而且使用起来非常简单。在本文中,我会手把手教你如何使用这个组件,并分享一些实际业务中的应用示例。希望你能从中受益。

重点内容:

  • table_calendar 的安装和基本使用
  • 如何为日历添加交互性
  • 如何在日历中添加和显示事件
  • 如何自定义日历的 UI
  • 如何设置日历的语言

二、安装和基本使用

  1. 安装方法
    要使用 table_calendar,首先你需要在 pubspec.yaml 文件中添加以下依赖:
dependencies:
  table_calendar: ^3.0.9

然后运行 flutter pub get 命令来安装这个包。

  1. 基础设置
    使用 table_calendar 非常简单。首先,你需要为它提供 firstDaylastDayfocusedDay 这三个参数:
TableCalendar(
  firstDay: DateTime.utc(2010, 10, 16),
  lastDay: DateTime.utc(2030, 3, 14),
  focusedDay: DateTime.now(),
);

其中,firstDay 是日历的第一天,用户不能访问这一天之前的日期;lastDay 是日历的最后一天,用户不能访问这一天之后的日期;focusedDay 是当前的焦点日期,用于确定哪个月应该是当前可见的。

三、日历的交互性

  1. 添加交互性
    你可能会注意到,上面设置的日历组件并不是很有交互性——你只能水平滑动它来更改当前可见的月份。但是,通过指定一些回调,你可以轻松地为它添加交互性。例如,以下代码将允许日历响应用户的点击,将点击的日期标记为选中状态:
selectedDayPredicate: (day) {
  return isSameDay(_selectedDay, day);
},
onDaySelected: (selectedDay, focusedDay) {
  setState(() {
    _selectedDay = selectedDay;
    _focusedDay = focusedDay; // 这里也更新 `_focusedDay`
  });
},
  1. 更新 focusedDay
    focusedDay 设置为静态值意味着每当 TableCalendar 组件重建时,它都会使用该特定的 focusedDay。为了防止这种情况发生,你应该在任何回调中暴露它时存储和更新 focusedDay

四、日历事件

  1. 添加事件
    你可以为 TableCalendar 组件提供自定义事件。为此,请使用 eventLoader 属性 - 你将获得一个 DateTime 对象,你需要为其分配一个事件列表。
eventLoader: (day) {
  return _getEventsForDay(day);
},

_getEventsForDay() 可以是任何实现。例如,可以使用 Map<DateTime, List<T>>

List<Event> _getEventsForDay(DateTime day) {
  return events[day] ?? [];
}
  1. 循环事件
    eventLoader 允许你轻松添加重复的事件。例如,以下代码将在每个星期一添加一个事件:
eventLoader: (day) {
  if (day.weekday == DateTime.monday) {
    return [Event('Cyclic event')];
  }
  return [];
},
  1. 通过点击选择事件
    通常,通过点击某一天来选择的事件子列表是很受欢迎的。你可以通过在 onDaySelected 回调中使用与 eventLoader 相同的方法来实现这一点:
void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
  if (!isSameDay(_selectedDay, selectedDay)) {
    setState(() {
      _focusedDay = focusedDay;
      _selectedDay = selectedDay;
      _selectedEvents = _getEventsForDay(selectedDay);
    });
  }
}

五、自定义 UI 和 CalendarBuilders

  1. 自定义日历 UI
    要使用自己的小部件自定义 UI,请使用 CalendarBuilders。每个构建器都可以用于选择性地覆盖 UI,从而使你能够使用最小的麻烦实现高度特定的设计。

  2. 使用 CalendarBuilders
    例如,以下代码片段将仅覆盖周日的星期标签(Sun),其他星期标签保持不变:

calendarBuilders: CalendarBuilders(
  dowBuilder: (context, day) {
    if (day.weekday == DateTime.sunday) {
      final text = DateFormat.E().format(day);
      return Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.red),
        ),
      );
    }
  },
),

六、本地化和语言设置

  1. 初始化和设置语言
    在你可以使用某种语言之前,你可能需要初始化日期格式化。一个简单的方法是:
    首先,将 intl 包添加到你的 pubspec.yaml 文件中。然后对你的 main() 进行修改:
import 'package:intl/date_symbol_data_local.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

这样,你的应用程序应该准备好使用不同语言的 TableCalendar 了。

  1. 指定语言
    要指定语言,只需将其作为字符串代码传递给 locale 属性。例如,以下代码将使 TableCalendar 使用波兰语:
TableCalendar(
  locale: 'pl_PL',
),

七、完整实际业务代码示例

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  CalendarFormat _calendarFormat = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  late DateTime _selectedDay;
  late List<String> _selectedEvents;

  
  void initState() {
    super.initState();
    _selectedDay = _focusedDay;
    _selectedEvents = ['事件 1', '事件 2'];
  }

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Table Calendar 示例')),
        body: TableCalendar(
          firstDay: DateTime.utc(2010, 10, 16),
          lastDay: DateTime.utc(2030, 3, 14),
          focusedDay: _focusedDay,
          calendarFormat: _calendarFormat,
          selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
          onDaySelected: (selectedDay, focusedDay) {
            setState(() {
              _selectedDay = selectedDay;
              _focusedDay = focusedDay;
            });
          },
          onFormatChanged: (format) {
            setState(() {
              _calendarFormat = format;
            });
          },
          onPageChanged: (focusedDay) {
            _focusedDay = focusedDay;
          },
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              if (_selectedEvents.length < 5) {
                _selectedEvents.add('新事件 ${_selectedEvents.length + 1}');
              }
            });
          },
        ),
      ),
    );
  }
}

这个示例展示了如何在 Flutter 应用中添加一个 table_calendar,并为选定的日期添加事件。

运行结果如下所示:

八、总结

table_calendar 是一个功能强大且高度可定制的 Flutter 日历组件。无论你是想在应用中添加一个简单的日历视图,还是需要一个具有高度交互性和自定义功能的日历,table_calendar 都是一个不错的选择。希望本文能帮助你快速上手并有效地使用这个组件。

这是小雨青年于 2023 年发布在 CSDN 的博客,由于目前采集站侵权行为猖獗,如果你不是在 CSDN 看到本文,麻烦你通过 CSDN 联系我,谢谢你的支持。

对 Flutter 感兴趣,渴望深入探索和学习吗?Flutter 从零到一:基础入门到应用上线全攻略 正是你的完美起点!

📘 在这个专栏中,你将发现丰富的 Flutter 学习资源,从代码示例到深入的技术解读,一应俱全。
🛠️ 想要了解如何用 Flutter 构建出色的应用吗?所有的秘诀和答案都在我们的专栏里等着你!
💰 别再犹豫,专栏内容将不断更新,价格也将逐渐上涨。现在就加入,享受最优惠的价格,开启你的 Flutter 探索之旅!

想了解更多?点击这里查看 Flutter Developer 101:入门小册 & 专栏指引

👥 还有,别忘了点击这里 加入我们的讨论群,与其他 Flutter 爱好者一起交流和学习,共同成长!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/984463.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023高教社杯数学建模国赛的工具箱准备

2023高教社杯数学建模国赛的工具箱准备 数学建模国赛工具箱&#xff08;私信领取&#xff09;&#xff01;&#xff01;&#xff01;小编仔细阅读了比赛官方网站上的规则和要求&#xff0c;以及比赛的题型和时间安排&#xff0c;现总结分享给大家。欢迎私信和评论&#xff0c;…

运维监控系统PIGOSS BSM 业务监控 大屏展现解析

“业务大屏”是 PIGOSS BSM&#xff08;IT运维监控工具&#xff09;的特色功能之一&#xff0c;旨在提供综合而直观的业务监控视图。该功能主要由三个组成部分构成&#xff1a;业务健康度雷达图、业务状态矩阵和多趋势对比图。 下面将对每个部分进行详细介绍&#xff1a; 业务健…

IDEA Java1.8通过sqljdbc4连接sqlserver插入语句

1. 下载sqljdbc4:https://mvnrepository.com/artifact/com.microsoft.sqlserver.jdbc/sqljdbc4/4.0 下载后在IDEA放入仓库内&#xff0c;可以放在resources下&#xff0c;右键“add as library”。 2. 在控制面板中开启Telnet客户端&#xff0c;默认是不开启的。 若报错“ ja…

VMware虚拟机安装运行MacOS系统

VMware虚拟机安装运行MacOS系统 1. VMware虚拟机安装运行MacOS系统1.1. 前期准备 2. 解锁虚拟机MacOS2.1. 解锁后效果 3. 开始安装MacOS系统3.1. 选择系统3.2. 虚拟机磁盘3.3. 镜像 4. 开机配置4.1. MacOS图标4.2. 磁盘4.2.1. 磁盘配置4.2.2. 抹掉数据 4.3. 安装系统4.3.1. 安装…

论文阅读——Co-Salient Object Detection with Co-Representation Purification

目录 基本信息标题摘要引言方法PCSRPP 实验 基本信息 期刊IEEE TPAMI年份2023论文地址https://arxiv.org/pdf/2303.07670.pdf代码地址https://github.com/ZZY816/CoRP 标题 具有共同表示净化的共同显著目标检测 摘要 共同显著目标检测&#xff08;Co-SOD&#xff09;旨在发…

Java使用GraalVM Native Image打包可执行程序

GraalVM Native Image 技术可提前将 Java 代码编译为自包含的可执行文件。只有应用程序运行时所需的代码才会添加到可执行文件中。 也就是说打包体积会很小&#xff0c;不需要考虑设备有没有java环境&#xff0c;也不需要带着笨重的 jre 了 安装过程有很多的坑&#xff0c;愿你…

《Web安全基础》04. 文件操作安全

web 1&#xff1a;文件操作安全2&#xff1a;文件上传漏洞2.1&#xff1a;简介2.2&#xff1a;防护与绕过2.3&#xff1a;WAF 绕过2.3.1&#xff1a;数据溢出2.3.2&#xff1a;符号变异2.3.3&#xff1a;数据截断2.3.4&#xff1a;重复数据 3&#xff1a;文件包含漏洞4&#xf…

Java EE企业级开发学习 -- day1

什么是Java EE? 它是基于Java语言的一种软件设计体系结构&#xff0c;它是一种标准中间件体系结构。它的作用在于能标准化企业级多层结构应用系统的部署&#xff0c;并且简化开发环境。 具体环境的搭建 1.下载压缩包于安装包 jdk-8u261-windows-x64 eclipse-jee-2018-12-…

Navicat15工具连接PostgreSQL15失败

1.错误现象及原因 错误现象&#xff1a; 错误原因&#xff1a; postgresql 15版本中 pg_database 系统表把 datlastsysoid 列删除了&#xff0c;所以造成了此错误。 2.解决方法 &#xff08;1&#xff09;将Navicat工具更新到官网最新版本。 &#xff08;2&#xff09;更换…

如何使用CSS画一个三角形

原理&#xff1a;其实就是规定元素的四个边框颜色及边框宽度&#xff0c;将元素宽高设置为0。如果要哪个方向的三角形&#xff0c;将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可 1.元素设置边框&#xff0c;宽高&#xff0c;背景色 <style>.border {w…

STL vector

文章目录 一、vector 类的模拟实现 vector 是一个动态增长的数组&#xff0c;可以存储任意类型 模板参数 T 表示存储元素的类型&#xff0c;Alloc 是空间配置器&#xff0c;一般不用传 vector 的接口使用和 string 类似&#xff0c;参考 string 一、vector 类的模拟实现 vec…

Facebook 已删除 276.7 亿虚假账户,大量真实用户被“误伤”

据Cyber News消息&#xff0c;正有数以千计的用户在X&#xff08;Twitter&#xff09;及其他平台上表达对Facebook的不满&#xff0c;因为该平台在打击虚假账户时对他们的正常账户进行了“误伤”。 自 2017 年 10 月以来&#xff0c;Facebook 已删除了 276.7 亿个虚假账户&…

函数相关概念

4.函数 1.函数的概念 1.什么是函数? 把特点的代码片段,抽取成为独立运行的实体 2.使用函数的好处1.重复使用,提供效率2.提高代码的可读性3.有利用程序的维护 3.函数的分类1.内置函数(系统函数)已经提高的alert(); prompt();confirm();print()document.write(),console.log()…

实训三:多表查询 - 大学数据库创建与查询实战

大学数据库创建与查询实战 第1关&#xff1a;数据库表设计任务描述相关知识大学数据库的整体设计教师信息表&#xff08;instructor&#xff09;开课信息表&#xff08;section&#xff09; 编程要求测试说明参考代码 第2关&#xff1a;查询&#xff08;一&#xff09;任务描述…

【javaweb】学习日记Day10 - tlias智能管理系统 - 部门、员工管理功能开发

目录 一、建立项目的基本操作步骤 二、前期搭建环境 1、创建springboot工程 ​2、引入对应依赖 3、对建立好的框架进行调试 &#xff08;1&#xff09;pom.xml没有显示蓝色怎么解决&#xff1f; &#xff08;2&#xff09; 启动类为橙红色java文件怎么办&#xff1f; 4…

OSS专栏------文件上传(一)

目录 1、简单上传1.1、流式上传1.1.1、上传字符串1.1.1.1、代码示例1.1.1.2、执行结果 1.1.2、上传Byte数组1.1.2.1、代码示例1.1.2.2、执行结果 1.1.3、上传网络流1.1.3.1、代码示例1.1.3.2、执行结果 1.1.4、上传文件流1.1.4.1、代码示例1.1.4.2、执行结果 1.2、文件上传1.2.…

申威芯片UOS中opencv DNN推理

Cmake&#xff0c;opencv&#xff0c;opencv-contribute安装 #apt可能需要更新apt update apt install -y wget unzip apt-get install build-essential libgtk2.0-dev libgtk-3-dev libavcodec-dev libavformat-dev libjpeg-dev libswscale-dev libtiff5-dev#安装cmake apt i…

【OceanBase概念】国产数据库OceanBase的那些事儿(1)初识OceanBase

文章目录 写在前面涉及知识点1、OceanBase是什么&#xff1f;1.1基本概念1.2发展历史 2、TPC-C认证2.1什么是TPCC2.2OceanBase认证成果 3、OceanBase应用场景3.1行业应用A、金融行业B、电信运营行业C、保险行业D、初创互联网行业 3.2内部应用A、支付宝B、淘宝C、网商银行D、Pay…

草图大师SketchUp Pro 2023 for Mac

SketchUp Pro 2023 for Mac&#xff08;草图大师&#xff09;是一款专业的三维建模软件&#xff0c;由Trimble Inc.开发。它可以用于创建、修改和分享3D模型&#xff0c;包括建筑、家具、景观等。 SketchUp Pro 2023 for Mac提供了简单易学的用户界面和强大的工具集&#xff0…

【数据恢复】.360勒索病毒|金蝶、用友、OA、ERP等软件数据库恢复

引言&#xff1a; 在当今数字化的时代&#xff0c;网络犯罪已经演变成了一场全球性的威胁&#xff0c;而 360 勒索病毒则是其中最为可怕和具有破坏性的威胁之一。这种恶意软件以其危害深远、难以防范的特点而令人震惊。本文91数据恢复将深入探讨 360 勒索病毒的可怕性&#xff…