Flutter日历视图插件calendar_view_pt的使用

Flutter日历视图插件calendar_view_pt的使用

calendar_view_pt

Este pacote é um fork do calendar_view para suporte a língua portuguesa.

Para data e hour picker em português, veja o exemplo.

预览

预览

预览

预览

安装

  1. pubspec.yaml 中添加依赖:

    dependencies:
      calendar_view_pt:
        git:
            url: https://github.com/teixeirazeus/calendar_view_pt
    
  2. 运行 flutter pub get

    flutter pub get
    
  3. 导入包。

    import 'package:calendar_view_pt/calendar_view_pt.dart';
    

更多细节,请参阅 calendar_view 的文档。

许可证

MIT 许可证

版权所有 (c) 2021 Simform Solutions

特此免费授予获得本软件副本和相关文档文件(“软件”)的人不受限制地处理本软件的权利,包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本,并准许向其提供软件的人这样做,但须遵守以下条件:

上述版权声明和本许可声明应包含在所有副本或实质性部分中。

本软件按“原样”提供,不附带任何明示或暗示的保证,包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下,作者或版权持有者均不对因该软件或使用或其他交易而产生的任何索赔、损害或其他责任负责。

示例代码

main.dart

import 'dart:ui';

import 'package:calendar_view_pt/calendar_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_localizations/syncfusion_localizations.dart';

import 'model/event.dart';
import 'pages/mobile/mobile_home_page.dart';
import 'pages/web/web_home_page.dart';
import 'widgets/responsive_widget.dart';

// 获取当前时间
DateTime get _now => DateTime.now();

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 此小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CalendarControllerProvider<Event>(
      // 初始化事件控制器并添加事件
      controller: EventController<Event>()..addAll(_events),
      child: MaterialApp(
        title: 'Flutter 日历页面演示',
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          SfGlobalLocalizations.delegate
        ],
        supportedLocales: [Locale('pt', 'BR')], // 支持的语言和地区
        locale: Locale('pt'), // 设置默认语言为葡萄牙语
        debugShowCheckedModeBanner: false, // 禁用调试横幅
        theme: ThemeData.light(), // 使用亮色主题
        scrollBehavior: ScrollBehavior().copyWith(
          dragDevices: {
            PointerDeviceKind.trackpad,
            PointerDeviceKind.mouse,
            PointerDeviceKind.touch,
          }, // 支持的拖动设备
        ),
        home: ResponsiveWidget(
          mobileWidget: MobileHomePage(), // 移动端首页
          webWidget: WebHomePage(), // 网页端首页
        ),
      ),
    );
  }
}

// 定义一系列事件
List<CalendarEventData<Event>> _events = [
  CalendarEventData(
    date: _now, // 当前日期
    event: Event(title: "Joe's Birthday"), // 事件
    title: "项目会议", // 会议标题
    description: "今天是项目会议。", // 会议描述
    startTime: DateTime(_now.year, _now.month, _now.day, 18, 30), // 开始时间
    endTime: DateTime(_now.year, _now.month, _now.day, 22), // 结束时间
  ),
  CalendarEventData(
    date: _now.add(Duration(days: 1)), // 下一天
    startTime: DateTime(_now.year, _now.month, _now.day, 18), // 开始时间
    endTime: DateTime(_now.year, _now.month, _now.day, 19), // 结束时间
    event: Event(title: "婚礼纪念日"), // 事件
    title: "婚礼纪念日", // 会议标题
    description: "参加叔叔的婚礼纪念日。", // 会议描述
  ),
  CalendarEventData(
    date: _now, // 当前日期
    startTime: DateTime(_now.year, _now.month, _now.day, 14), // 开始时间
    endTime: DateTime(_now.year, _now.month, _now.day, 17), // 结束时间
    event: Event(title: "足球锦标赛"), // 事件
    title: "足球锦标赛", // 会议标题
    description: "去参加足球锦标赛。", // 会议描述
  ),
  CalendarEventData(
    date: _now.add(Duration(days: 3)), // 三天后
    startTime: DateTime(_now.add(Duration(days: 3)).year,
        _now.add(Duration(days: 3)).month, _now.add(Duration(days: 3)).day, 10), // 开始时间
    endTime: DateTime(_now.add(Duration(days: 3)).year,
        _now.add(Duration(days: 3)).month, _now.add(Duration(days: 3)).day, 14), // 结束时间
    event: Event(title: "冲刺会议"), // 事件
    title: "冲刺会议", // 会议标题
    description: "去年项目的最后提交日。", // 会议描述
  ),
  CalendarEventData(
    date: _now.subtract(Duration(days: 2)), // 前两天
    startTime: DateTime(
        _now.subtract(Duration(days: 2)).year,
        _now.subtract(Duration(days: 2)).month,
        _now.subtract(Duration(days: 2)).day,
        14), // 开始时间
    endTime: DateTime(
        _now.subtract(Duration(days: 2)).year,
        _now.subtract(Duration(days: 2)).month,
        _now.subtract(Duration(days: 2)).day,
        16), // 结束时间
    event: Event(title: "团队会议"), // 事件
    title: "团队会议", // 会议标题
    description: "团队会议", // 会议描述
  ),
  CalendarEventData(
    date: _now.subtract(Duration(days: 2)), // 前两天
    startTime: DateTime(
        _now.subtract(Duration(days: 2)).year,
        _now.subtract(Duration(days: 2)).month,
        _now.subtract(Duration(days: 2)).day,
        10), // 开始时间
    endTime: DateTime(
        _now.subtract(Duration(days: 2)).year,
        _now.subtract(Duration(days: 2)).month,
        _now.subtract(Duration(days: 2)).day,
        12), // 结束时间
    event: Event(title: "化学口试"), // 事件
    title: "化学口试", // 会议标题
    description: "今天是乔的生日。", // 会议描述
  ),
];

更多关于Flutter日历视图插件calendar_view_pt的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter日历视图插件calendar_view_pt的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用calendar_view_pt插件的一个基本示例。这个示例将展示如何集成该插件并显示一个简单的日历视图。

首先,确保你已经在pubspec.yaml文件中添加了calendar_view_pt依赖:

dependencies:
  flutter:
    sdk: flutter
  calendar_view_pt: ^最新版本号  # 请替换为实际的最新版本号

然后,运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中使用CalendarViewPt组件。以下是一个完整的示例代码:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calendar View Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CalendarPage(),
    );
  }
}

class CalendarPage extends StatefulWidget {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calendar View Demo'),
      ),
      body: CalendarViewPt(
        // 设置初始显示的日期
        initialDate: DateTime.now(),
        // 设置日历的最小日期
        minDate: DateTime(2000),
        // 设置日历的最大日期
        maxDate: DateTime(2100),
        // 设置日期选择回调
        onDateSelected: (DateTime date) {
          print('Selected date: $date');
        },
        // 设置日期范围选择回调(如果需要范围选择功能)
        onDateRangeSelected: (DateTime start, DateTime end) {
          print('Selected date range: $start - $end');
        },
        // 其他可选配置,例如设置星期的开始日等
        firstDayOfWeek: DayOfWeek.monday,
        // 自定义日期单元格的样式
        builder: (context, date, state) {
          // state 可以是 CalendarDateState.inactive, selected, today, 或者其他状态
          return Container(
            decoration: BoxDecoration(
              color: state == CalendarDateState.today
                  ? Colors.grey[200]
                  : state == CalendarDateState.selected
                      ? Colors.blue[200]
                      : Colors.transparent,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Center(
              child: Text(
                '${date.day}',
                style: TextStyle(
                  color: state == CalendarDateState.today
                      ? Colors.black
                      : state == CalendarDateState.selected
                          ? Colors.white
                          : Colors.black54,
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

解释

  1. 依赖管理:在pubspec.yaml文件中添加calendar_view_pt依赖。
  2. 基本结构:创建一个简单的Flutter应用,包含一个CalendarPage页面。
  3. CalendarViewPt组件
    • initialDate:设置初始显示的日期。
    • minDatemaxDate:设置日历的最小和最大日期范围。
    • onDateSelected:当用户选择一个日期时的回调。
    • onDateRangeSelected:如果用户需要选择日期范围,可以添加这个回调(这个回调是可选的,根据你的需求来决定是否使用)。
    • firstDayOfWeek:设置一周的第一天是哪天。
    • builder:自定义日期单元格的样式。你可以根据日期的状态(如今天、选中、非活跃等)来设置不同的样式。

你可以根据具体需求进一步自定义和扩展这个示例。希望这个示例能帮助你快速上手calendar_view_pt插件的使用!

回到顶部