Flutter波斯语水平日期选择器插件persian_horizontal_date_picker的使用

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

Flutter波斯语水平日期选择器插件 persian_horizontal_date_picker 的使用

persian_horizontal_date_picker 是一个支持波斯历（Jalali）和公历（Gregorian）的可定制水平日期选择器库。本文将详细介绍如何在Flutter项目中使用这个插件。

功能预览

screenshot

开始使用

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  persian_horizontal_date_picker: ^2.0.0

2. 安装包

在命令行中运行以下命令来安装包：

flutter pub get

3. 导入包

在 Dart 文件中导入该包：

import 'package:persian_horizontal_date_picker/persian_horizontal_date_picker.dart';

使用方法

使用 PersianHorizontalDatePicker 小部件：

PersianHorizontalDatePicker(
  startDate: DateTime.now(),
  endDate: DateTime.now().add(const Duration(days: 30)),
  initialSelectedDate: DateTime.now(),
  onDateSelected: (date) {},
)

参数说明

参数 类型 默认值 描述
startDate DateTime — 日期选择器的起始日期
endDate DateTime — 日期选择器的结束日期
initialSelectedDate DateTime? null 初始选中的日期
markedDates List<DateTime>? null 带有标记的日期
onDateSelected Function(DateTime?) — 选择日期时的回调函数
isPersianDate bool true 是否使用波斯历
datePickerHeight double 112 日期选择器的高度
gap double — 日期单元格之间的间距
width double 84 每个日期单元格的宽度
verticalPadding double 12 日期单元格内的垂直填充
radius double 56 单元格的圆角半径
backgroundColor Color Color(0xFFBBDEFB) 非选中状态下的背景颜色
selectedBackgroundColor Color Colors.blue 选中状态下的背景颜色
onBackgroundColor Color Colors.blue 非选中状态下的文本颜色
selectedOnBackgroundColor Color Colors.white 选中状态下的文本颜色
weekDayTextStyle TextStyle? TextStyle(fontSize: 12) 星期标签的样式
dayTextStyle TextStyle? TextStyle(fontSize: 16, fontWeight: FontWeight.bold) 天数标签的样式
monthTextStyle TextStyle? TextStyle(fontSize: 12) 月份标签的样式
hasShadow bool true 是否显示阴影效果
shadows List<BoxShadow> [BoxShadow(color: Colors.blue, blurRadius: 25, spreadRadius: -12, offset: Offset(0, 16))] 选中状态下单元格的阴影列表

迁移指南

  • 替换 margin 为 gap
  • 替换 contentPadding 为 verticalPadding
  • 替换 hasSelectedItemShadow 为 hasShadow
  • 已弃用的参数如 textColor, selectedTextColor, selectedWeekDayTextStyle, selectedDayTextStyle, selectedMonthTextStyle, markedDotColor, selectedMarkedDotColor 已被移除

示例代码

以下是一个完整的示例，展示了如何在实际项目中使用 PersianHorizontalDatePicker：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Persian Horizontal Date Picker',
      theme: ThemeData(fontFamily: 'Shabnam'),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Persian Horizontal Date Picker"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            PersianHorizontalDatePicker(
              startDate: DateTime.now(),
              endDate: DateTime.now().add(const Duration(days: 30)),
              initialSelectedDate: DateTime.now(),
              markedDates: [DateTime.now()],
              isPersianDate: true,
              datePickerHeight: 112,
              width: 84,
              verticalPadding: 12,
              radius: 56,
              backgroundColor: const Color(0xFFBBDEFB),
              selectedBackgroundColor: Colors.blue,
              onBackgroundColor: Colors.blue,
              selectedOnBackgroundColor: Colors.white,
              weekDayTextStyle: const TextStyle(fontSize: 12),
              dayTextStyle: const TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
              monthTextStyle: const TextStyle(fontSize: 12),
              hasShadow: true,
              shadows: const [
                BoxShadow(
                  color: Colors.blue,
                  blurRadius: 25,
                  spreadRadius: -12,
                  offset: Offset(0, 16),
                ),
              ],
              onDateSelected: (date) {
                print('Selected date: $date');
              },
            ),
          ],
        ),
      ),
    );
  }
}

通过上述步骤，你可以在你的Flutter应用中集成并自定义波斯语水平日期选择器。希望这篇指南对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中集成和使用persian_horizontal_date_picker插件的一个示例。这个插件允许你选择波斯语（波斯历）的水平日期。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加persian_horizontal_date_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  persian_horizontal_date_picker: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

步骤 2: 导入插件

在你的Dart文件中导入插件：

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

步骤 3: 使用插件

下面是一个完整的示例，展示如何在Flutter应用中使用persian_horizontal_date_picker：

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Persian Horizontal Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : 'Selected Date: ${selectedDate!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            PersianHorizontalDatePicker(
              initialDate: JalaliDateTime.now(),
              firstDate: JalaliDateTime(1300, 1, 1),
              lastDate: JalaliDateTime(1400, 12, 31),
              onChanged: (JalaliDateTime? date) {
                setState(() {
                  selectedDate = date;
                });
              },
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖管理：

    • 在pubspec.yaml中添加persian_horizontal_date_picker依赖。

  2. 导入插件：

    • 使用import 'package:persian_horizontal_date_picker/persian_horizontal_date_picker.dart';来导入插件。

  3. 使用插件：

    • 创建一个StatefulWidget，在其中定义一个JalaliDateTime?类型的变量来存储选择的日期。
    • 使用PersianHorizontalDatePicker小部件来显示日期选择器。
    • 配置initialDate、firstDate和lastDate属性来设置初始日期和可选日期的范围。
    • 使用onChanged回调来处理日期变化，并使用setState方法来更新UI。

这样，你就可以在你的Flutter应用中集成并使用persian_horizontal_date_picker插件来选择波斯语水平日期了。确保在实际项目中根据需求调整代码。

回到顶部