首页 > 其他 > 详细

flutter table_calendar日历的使用

时间:2021-04-28 16:46:10      阅读:635      评论:0      收藏:0      [点我收藏+]

table_calendar 一个比较好的日历框架,目前升级后已经支持null safety了
技术分享图片

关于使用可以直接参考https://pub.dev/packages/table_calendar,这里主要介绍一些配置项
1.国际化locale属性

locale: ‘zh_CN‘,

2.设置日历最大开始日期,最小开始日期

firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 1, 1),

3.设日历头部显示和隐藏

headerVisible:true

4.设置日历头部星期描述行显示和隐藏

daysOfWeekVisible: true,

5.设置是否支持上下左右滚动

enum AvailableGestures { none, verticalSwipe, horizontalSwipe, all }
availableGestures: AvailableGestures.all,//默认上下左右均可滚动

6.设置日历周开始时间 这里设置为周一为每周的开始时间

startingDayOfWeek: StartingDayOfWeek.monday 

7.设置头部属性显示和隐藏

headerStyle: HeaderStyle(
      titleCentered: true,
      leftChevronVisible: false,
      rightChevronVisible: false,
      formatButtonVisible: false,
    ),

8.设置选中状态和非选中状态颜色等参数

calendarStyle: CalendarStyle(
    holidayTextStyle: TextStyle(color: Colors.red),
    holidayDecoration: BoxDecoration(
        color: Colors.transparent, shape: BoxShape.circle),
    // Use `CalendarStyle` to customize the UI
    outsideDaysVisible: true,
    // outsideDecoration: BoxDecoration(
    //   color: Colors.cyan,
    // ),
    markersMaxCount: 1,
    // outsideDecoration: ,
    // markerSize: 10,
    // markersAlignment: Alignment.bottomCenter,
    // markerMargin: EdgeInsets.only(top: 8),
    // cellMargin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    todayDecoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),

    // markerSizeScale: 5,
    markerDecoration:
        BoxDecoration(color: Colors.cyan, shape: BoxShape.circle),
    canMarkersOverflow: true)

9.非当月日期是否需要显示出来

outsideDaysVisible: true

flutter table_calendar日历的使用

原文:https://www.cnblogs.com/qqcc1388/p/14713707.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!