Flutter波斯线性日期选择插件persian_linear_date_picker的使用

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

Flutter波斯线性日期选择插件persian_linear_date_picker的使用

插件介绍

persian_linear_date_picker 是一个专门为波斯语（伊朗）和文化设计的线性日期选择器。它支持自定义标签、波斯日期与公历日期之间的转换，并且可以在Dart和Flutter项目中使用。该插件支持所有平台（Android、iOS、Windows、Linux、Mac），并且包含示例项目。

package cover

功能特性

  • 线性日期选择器
  • 可自定义标签
  • 支持波斯日期与公历日期之间的转换
  • 可用于Dart和Flutter项目
  • 支持所有平台（Android、iOS、Windows、Linux、Mac）
  • 包含示例项目

快速开始

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  persian_linear_date_picker: any

使用方法

首先，导入插件：

import 'package:persian_linear_date_picker/persian_linear_date_picker.dart';

然后，使用 PersianLinearDatePicker 组件。以下是两个示例，分别展示了如何使用波斯日期和公历日期。

示例1：使用波斯日期
PersianLinearDatePicker(
  endDate: '1405/12/29', // 结束日期（波斯历）
  initialDate: "1401/10/26", // 初始日期（波斯历）
  startDate: "1300/01/01", // 开始日期（波斯历）
  dateChangeListener: (String selectedDate) {
    print(selectedDate); // 打印选中的日期
  },
  showMonthName: true, // 是否显示月份名称
  columnWidth: 90, // 列宽
  labelStyle: const TextStyle(fontFamily: 'IS_B', color: Colors.blue), // 标签样式
  selectedRowStyle: const TextStyle(fontFamily: 'IS_B'), // 选中行样式
  unselectedRowStyle: const TextStyle(fontFamily: 'IS_UL'), // 未选中行样式
  isPersian: true, // 是否使用波斯历
),
示例2：使用公历日期
PersianLinearDatePicker(
  yearText: 'Year', // 年份标签
  monthText: 'Month', // 月份标签
  dayText: 'Day', // 日期标签
  endDate: '2025/11/20', // 结束日期（公历）
  initialDate: "2023/05/17", // 初始日期（公历）
  startDate: "1980/04/10", // 开始日期（公历）
  dateChangeListener: (String selectedDate) {
    print(selectedDate); // 打印选中的日期
  },
  showMonthName: true, // 是否显示月份名称
  columnWidth: 90, // 列宽
  labelStyle: const TextStyle(fontFamily: 'DIN', color: Colors.blue), // 标签样式
  selectedRowStyle: const TextStyle(
    fontFamily: 'DIN',
    fontWeight: FontWeight.bold, // 选中行样式
  ),
  unselectedRowStyle: const TextStyle(fontFamily: 'DIN'), // 未选中行样式
  isPersian: false, // 是否使用波斯历
),

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 persian_linear_date_picker 插件。这个示例包含了两个 PersianLinearDatePicker 组件，分别用于选择波斯日期和公历日期。

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:persian_linear_date_picker/persian_linear_date_picker.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: const Locale('fa'), // 设置语言为波斯语
      supportedLocales: const [
        Locale('fa'), // 支持的语言
      ],
      debugShowCheckedModeBanner: false, // 隐藏调试模式横幅
      title: '波斯线性日期选择器',
      theme: ThemeData(
        fontFamily: 'IS', // 设置字体
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: const MyHomePage(title: '选择波斯日期和公历日期'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var pickedDate = ''; // 用于存储选中的日期

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 波斯日期选择器
          Container(
            clipBehavior: Clip.hardEdge, // 剪切行为
            margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 20), // 外边距
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20), // 内边距
            decoration: BoxDecoration(
              color: Colors.white, // 背景颜色
              borderRadius: BorderRadius.circular(25), // 圆角
              boxShadow: [
                BoxShadow(
                  color: Colors.blueAccent[100]!.withOpacity(0.2), // 阴影颜色
                  spreadRadius: 0, // 扩展半径
                  blurRadius: 15, // 模糊半径
                  offset: const Offset(0, 0), // 偏移量
                ),
              ],
            ),
            child: PersianLinearDatePicker(
              endDate: '1405/12/29', // 结束日期（波斯历）
              initialDate: "1401/10/26", // 初始日期（波斯历）
              startDate: "1300/01/01", // 开始日期（波斯历）
              dateChangeListener: (String selectedDate) {
                print(selectedDate); // 打印选中的日期
              },
              showMonthName: true, // 是否显示月份名称
              columnWidth: 90, // 列宽
              labelStyle: const TextStyle(fontFamily: 'IS_B', color: Colors.blue), // 标签样式
              selectedRowStyle: const TextStyle(fontFamily: 'IS_B'), // 选中行样式
              unselectedRowStyle: const TextStyle(fontFamily: 'IS_UL'), // 未选中行样式
              isPersian: true, // 是否使用波斯历
            ),
          ),
          
          // 公历日期选择器
          Container(
            clipBehavior: Clip.hardEdge, // 剪切行为
            margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 20), // 外边距
            padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20), // 内边距
            decoration: BoxDecoration(
              color: Colors.white, // 背景颜色
              borderRadius: BorderRadius.circular(25), // 圆角
              boxShadow: [
                BoxShadow(
                  color: Colors.blueAccent[100]!.withOpacity(0.2), // 阴影颜色
                  spreadRadius: 0, // 扩展半径
                  blurRadius: 15, // 模糊半径
                  offset: const Offset(0, 0), // 偏移量
                ),
              ],
            ),
            child: PersianLinearDatePicker(
              yearText: 'Year', // 年份标签
              monthText: 'Month', // 月份标签
              dayText: 'Day', // 日期标签
              endDate: '2025/11/20', // 结束日期（公历）
              initialDate: "2023/05/17", // 初始日期（公历）
              startDate: "1980/04/10", // 开始日期（公历）
              dateChangeListener: (String selectedDate) {
                print(selectedDate); // 打印选中的日期
              },
              showMonthName: true, // 是否显示月份名称
              columnWidth: 90, // 列宽
              labelStyle: const TextStyle(fontFamily: 'DIN', color: Colors.blue), // 标签样式
              selectedRowStyle: const TextStyle(
                fontFamily: 'DIN',
                fontWeight: FontWeight.bold, // 选中行样式
              ),
              unselectedRowStyle: const TextStyle(fontFamily: 'DIN'), // 未选中行样式
              isPersian: false, // 是否使用波斯历
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter波斯线性日期选择插件persian_linear_date_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter波斯线性日期选择插件persian_linear_date_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用persian_linear_date_picker插件的示例代码。这个插件允许你以波斯（伊朗）日历格式展示日期选择器。

首先，确保你已经将persian_linear_date_picker添加到你的pubspec.yaml文件中：

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

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

接下来，你可以在你的Flutter应用中使用该插件。以下是一个简单的示例代码：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PersianDate? selectedDate;

  void _selectDate(PersianDate? date) {
    setState(() {
      selectedDate = date;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Persian Linear Date Picker Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date:',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 10),
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : selectedDate!.toJalaliString(),
              style: TextStyle(fontSize: 18, color: Colors.blue),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                showDatePicker(
                  context: context,
                  initialDate: selectedDate ?? PersianDate.now(),
                  firstDate: PersianDate(year: 1300, month: 1, day: 1),
                  lastDate: PersianDate(year: 1400, month: 12, day: 31),
                  builder: (context, currentDate, onConfirm, onCancel) {
                    return PersianLinearDatePicker(
                      date: currentDate,
                      onDateChanged: (date) => onConfirm(date),
                      locale: Locale('fa', 'IR'), // 波斯语
                    );
                  },
                ).then((date) {
                  if (date != null) {
                    _selectDate(date);
                  }
                });
              },
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 导入依赖：首先导入flutter/material.dart和persian_linear_date_picker/persian_linear_date_picker.dart。

  2. 设置MyApp和MyHomePage：创建主应用类MyApp和主页面类MyHomePage。

  3. 状态管理：在_MyHomePageState中定义一个PersianDate?类型的变量selectedDate来存储选中的日期。

  4. 选择日期的方法：定义_selectDate方法来更新选中的日期。

  5. UI布局：使用Scaffold、AppBar、Column、Text和ElevatedButton来构建UI。在按钮点击事件中，使用showDatePicker方法显示日期选择器，并传入自定义的builder来显示波斯线性日期选择器。

  6. 日期选择器：在builder中，使用PersianLinearDatePicker来显示日期选择器，并设置初始日期、日期变化回调等。

  7. 本地化：通过locale: Locale('fa', 'IR')来设置波斯语环境。

运行这个示例代码，你将会看到一个简单的应用，点击按钮可以选择波斯日历格式的日期，并在页面上显示选中的日期。

回到顶部