Flutter日历插件table_calendar_jalali的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter日历插件table_calendar_jalali的使用

table_calendar_jalali 是一个为 Flutter 应用程序提供的自定义表格日历组件，支持波斯（Jalali）日历系统。它允许用户浏览不同的月份，选择特定的日期，并自定义日历的外观。

此包利用 shamsi_date 包来处理波斯日历功能，并扩展 String 类以进行波斯数字转换。

示例使用

要使用 table_calendar_jalali 包，请遵循以下步骤：

1. 添加依赖到你的 pubspec.yaml 文件中

dependencies:
  table_calendar_jalali: ^lastVersion

2. 在 Flutter widget 树中实现 JalaliTableCalendar 组件

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Jalali selectedDate;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jalali Calendar'),
      ),
      body: Center(
        child: JalaliTableCalendar(
          currentMonth: Jalali.now(), // 设置当前月份为今天
          headerStyle: TextStyle(color: Colors.blue), // 设置头部样式
          weekDaysStyle: TextStyle(fontSize: 12), // 设置星期样式
          selectedDay: selectedDate, // 设置选中的日期
          dayBuilder: (context, date) {
            // 自定义日期构建器
            return Container(
              margin: EdgeInsets.all(5),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: Text(
                  date.day.toString().toFarsiNumber(), // 将日期转换为波斯数字
                  style: TextStyle(fontSize: 16),
                ),
              ),
            );
          },
          onDaySelected: (date) {
            // 处理日期选择事件
            print('Selected date: $date');
            setState(() {
              selectedDate = date; // 更新选中的日期
            });
          },
          headerText: (date) {
            // 自定义头部文本
            return '${date.formatter.mN} ${date.year}'.toFarsiNumber(); // 将月份和年份转换为波斯数字
          },
          onMonthChanged: (date) {
            // 处理月份变化事件
            print('Current month: $date');
          },
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用table_calendar_jalali插件的示例代码。这个插件是用于显示和交互Jalali（波斯历）日历的。

首先，确保你已经在pubspec.yaml文件中添加了table_calendar_jalali依赖：

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

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

接下来，在你的Dart文件中导入该插件，并创建一个示例日历页面。以下是一个完整的示例代码：

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

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

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

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

class _CalendarPageState extends State<CalendarPage> with SingleTickerProviderStateMixin {
  CalendarController _controller;
  CalendarFormat _currentCalendarFormat = CalendarFormat.month;
  DateTime _selectedDay = DateTime.now().jalali; // 使用Jalali日期
  DateTime? _focusedDay;
  Map<DateTime, List<dynamic>> _events = {};

  @override
  void initState() {
    super.initState();
    _controller = CalendarController();

    // 初始化一些示例事件
    _events = {
      DateTime(1399, 9, 15).jalali: ['Event A'], // 波斯历日期
      DateTime(1399, 9, 20).jalali: ['Event B', 'Event C'],
      DateTime(1399, 9, 25).jalali: ['Event D'],
      // 可以添加更多事件
    };

    // 监听日历控制器以获取当前显示日期的变化
    _controller.addListener(() {
      setState(() {
        _focusedDay = _controller.focusedDay;
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onDaySelected(DateTime day, List<dynamic> events) {
    setState(() {
      _selectedDay = day;
      _events[day] = events;
    });
  }

  void _onFormatChanged(CalendarFormat format) {
    setState(() {
      _currentCalendarFormat = format;
      _controller.setViewport(
        startDate: _controller.rangeStart,
        endDate: _controller.rangeEnd,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Jalali Calendar Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(
            child: TableCalendarJalali(
              _controller,
              _currentCalendarFormat,
              locale: 'fa_IR', // 波斯语本地化
              startingDayOfWeek: StartingDayOfWeek.saturday,
              calendarStyle: CalendarStyle(
                todayColor: Colors.blue,
                selectedColor: Colors.deepOrange.withOpacity(0.5),
                todayStyle: TextStyle(fontWeight: FontWeight.bold),
                selectedTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                daysOfWeekStyle: TextStyle(color: Colors.grey[600]),
              ),
              headerStyle: HeaderStyle(
                centerHeaderTitle: true,
                formatButtonVisible: true,
              ),
              builders: CalendarBuilders(
                selectedDayBuilder: (context, date, events) => Container(
                  margin: const EdgeInsets.all(4.0),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.deepOrange.withOpacity(0.5),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Text(
                    date.day.toString(),
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                todayDayBuilder: (context, date, events) => Container(
                  margin: const EdgeInsets.all(4.0),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.blue.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Text(
                    date.day.toString(),
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              onDaySelected: _onDaySelected,
              onFormatChanged: _onFormatChanged,
            ),
          ),
          _buildEventList(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.nextPage();
          });
        },
        tooltip: 'Next Month',
        child: Icon(Icons.navigate_next),
      ),
    );
  }

  Widget _buildEventList() {
    return _events[_selectedDay]?.length ?? 0 > 0
        ? ListView(
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            children: _events[_selectedDay]!.map<Widget>((event) => ListTile(
              title: Text(event.toString()),
            )).toList(),
          )
        : Container(
            child: Center(
              child: Text('No events today!'),
            ),
          );
  }
}

在这个示例中，我们创建了一个Flutter应用，其中包含了一个Jalali日历。日历支持日期选择、格式切换（月视图和周视图），并且能够在选中日期下显示相关的事件。注意以下几点：

  1. 使用DateTime(year, month, day).jalali来创建Jalali日期对象。
  2. 设置locale: 'fa_IR'以使用波斯语本地化。
  3. _events字典中存储了示例事件，这些事件与特定的Jalali日期相关联。

你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部