Flutter周视图展示插件flutter_week_view的使用

简介

flutter_week_view 是一个用于在Flutter应用中显示高度可定制的一周视图（或一天视图）的插件。它可以显示事件、支持滚动和缩放，并提供许多其他功能。

开始使用

引入依赖

首先，在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_week_view: ^latest_version # 请替换为最新版本号

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

使用DayView和WeekView

DayView 示例

DayView 用于显示单个日期的日程安排。

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

class DayViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    DateTime date = DateTime(now.year, now.month, now.day);

    return Scaffold(
      appBar: AppBar(title: Text('Day View Example')),
      body: DayView(
        date: now,
        events: [
          FlutterWeekViewEvent(
            title: '会议',
            description: '与团队开会讨论项目进展',
            start: date.subtract(Duration(hours: 1)),
            end: date.add(Duration(hours: 18, minutes: 30)),
          ),
          // 添加更多事件...
        ],
        style: DayViewStyle.fromDate(
          date: now,
          currentTimeCircleColor: Colors.pink,
        ),
      ),
    );
  }
}

WeekView 示例

WeekView 用于显示多个日期的日程安排。

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

class WeekViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    DateTime date = DateTime(now.year, now.month, now.day);

    return Scaffold(
      appBar: AppBar(title: Text('Week View Example')),
      body: WeekView(
        dates: [date.subtract(Duration(days: 1)), date, date.add(Duration(days: 1))],
        events: [
          FlutterWeekViewEvent(
            title: '会议',
            description: '与团队开会讨论项目进展',
            start: date.subtract(Duration(hours: 1)),
            end: date.add(Duration(hours: 18, minutes: 30)),
          ),
          // 添加更多事件...
        ],
      ),
    );
  }
}

选项配置

公共选项

以下是 DayView 和 WeekView 都支持的选项：

• events: 要显示的事件列表。
• style: 自定义样式，包含多种样式选项。
• hoursColumnStyle: 自定义小时列样式。
• controller: 控制器，用于手动更改缩放设置。
• inScrollableWidget: 是否将小部件放入可滚动的小部件中。
• minimumTime 和 maximumTime: 设置每天显示的最小和最大时间。
• initialTime: 初始时间。
• userZoomable: 用户是否可以缩放小部件。
• currentTimeIndicatorBuilder: 自定义当前时间指示器。
• onHoursColumnTappedDown, onBackgroundTappedDown, onDayBarTappedDown: 各种点击回调函数。
• dragAndDropOptions: 启用拖拽事件。
• resizeEventOptions: 启用调整事件大小。

DayView 特定选项

• date: 小部件的日期。
• dayBarStyle: 日栏样式。

WeekView 特定选项

• dates: 小部件的日期列表。
• dayViewStyleBuilder: 根据提供的日期构建日视图样式。
• dayBarStyleBuilder: 根据提供的日期构建日栏样式。

动态添加事件示例

以下是一个动态添加事件的示例，展示了如何通过用户交互添加新的日程事件：

import 'package:flutter/material.dart';
import 'package:flutter_week_view/flutter_week_view.dart';
import 'dart:math';

class DynamicDayViewExample extends StatefulWidget {
  @override
  _DynamicDayViewState createState() => _DynamicDayViewState();
}

class _DynamicDayViewState extends State<DynamicDayViewExample> {
  List<FlutterWeekViewEvent> events = [];

  void addRandomEvent() {
    setState(() {
      DateTime start = DateTime.now().add(Duration(minutes: Random().nextInt(60 * 24)));
      events.add(FlutterWeekViewEvent(
        title: '新事件 ${events.length + 1}',
        start: start,
        end: start.add(Duration(hours: 1)),
        description: '这是一个新事件',
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动态添加事件'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: addRandomEvent,
          ),
        ],
      ),
      body: DayView(
        date: DateTime.now(),
        events: events,
        onBackgroundTappedDown: (DateTime dateTime) {
          setState(() {
            events.add(FlutterWeekViewEvent(
              title: '新事件',
              start: dateTime,
              end: dateTime.add(Duration(hours: 1)),
              description: '这是通过点击背景添加的新事件',
            ));
          });
        },
        dragAndDropOptions: DragAndDropOptions(
          onEventDragged: (FlutterWeekViewEvent event, DateTime newStartTime) {
            event.shiftEventTo(newStartTime);
            setState(() {});
          },
        ),
        resizeEventOptions: ResizeEventOptions(
          onEventResized: (FlutterWeekViewEvent event, DateTime newEndTime) {
            event.end = newEndTime;
            setState(() {});
          },
        ),
      ),
    );
  }
}

通过以上内容，您应该能够轻松地在Flutter应用中集成并使用 flutter_week_view 插件来创建和管理日程视图。如果您有任何问题或需要进一步的帮助，请随时查阅官方文档或访问GitHub仓库获取更多信息。