Flutter波斯语模态日期选择器插件persian_modal_date_picker的使用

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

Flutter波斯语模态日期选择器插件persian_modal_date_picker的使用

Persian_Modal_Date_Picker 是一个用于选择波斯历(Jalali)日期的模态日期选择器。

功能

  • 波斯历日期
  • 设置初始日期
  • 前进/后退选择器
  • 使用自定义验证器检查日期是否有效

使用方法

await showPersianDatePicker(
  context,
  (context, Date date) async {
    setState(() {
      _selectedDate = date;
    });
    Navigator.of(context).pop();
  },
  forwardYear: true,
  border: BorderRadius.only(
    topRight: Radius.circular(15), 
    topLeft: Radius.circular(15)
  ),
  validate: (ctx, date) {
    return date.year < 1402;
  },
  submitButtonStyle: defaultButtonsStyle.copyWith(
    text: '选择',
    backgroundColor: Colors.blueAccent,
    radius: 10,
  ),
);

参数

showPersianDatePicker(context, onSubmit, {/* 其他可选参数 */});
参数名称 类型 是否必需 描述
context BuildContext 上下文
onSubmit Future 选择日期时的回调函数
initYear int 初始化日期选择器的年份。注意,这只有在同时提供了 initMonthinitDay 时才有效
initMonth int initYear 相同
initDay int initYear 相同
border BorderRadiusGeometry 可选的圆角边框
yearDirection YearDirection 选择年份的方向。值可以是 YearDirection.backward, YearDirection.forwardYearDirection.both
backgroundColor Color 背景色
margin EdgeInsets 日期选择器的边距
submitButtonStyle ButtonsStyle 确认按钮样式
cancelButtonStyle ButtonsStyle 取消按钮样式
validate bool Function(BuildContext context, Jalali date) 提供一个验证函数来检查所选日期是否正确

ButtonsStyle

参数名称 类型 是否必需 描述
backgroundColor Color 默认值为 Colors.white
textColor Color 默认值为 Colors.black
radius double 默认值为 5.0
visible bool 默认值为 true
text String 默认值为 ''

开始使用

本项目是一个 Dart 包,可用于多个 Flutter 或 Dart 项目的代码共享。

有关如何开始使用 Flutter 的帮助,请查看我们的 在线文档,其中包含教程、示例、移动开发指南和完整的 API 参考。

示例代码

以下是完整的示例代码:

import 'package:flutter/material.dart';
import 'package:persian_modal_date_picker/persian_date_picker.dart';
import 'package:persian_modal_date_picker/button_style.dart';
import 'package:shamsi_date/shamsi_date.dart';

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Date? _selectedDate;

  String format(Date? d) {
    if (d == null) return '';
    final formatter = d.formatter;
    return '${formatter.wN} ${formatter.d} ${formatter.mN} ${formatter.yyyy}';
  }

  void showDatePicker() async {
    await showPersianDatePicker(
      context,
      (context, Date date) async {
        setState(() {
          _selectedDate = date;
        });
        Navigator.of(context).pop();
      },
      yearDirection: YearDirection.both,
      border: BorderRadius.only(topRight: Radius.circular(15), topLeft: Radius.circular(15)),
      validate: (ctx, date) {
        return date.year < 1402;
      },
      cancelButtonStyle: ButtonsStyle(
        text: '取消',
        radius: 10,
      ),
      submitButtonStyle: ButtonsStyle(
        text: '选择',
        // backgroundColor: Colors.blueAccent,
        radius: 10,
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '您的选择日期是:',
              style: Theme.of(context).textTheme.titleMedium,
            ),
            SizedBox(height: 15),
            Text(
              '${format(_selectedDate)}',
              style: Theme.of(context).textTheme.titleMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: showDatePicker,
        tooltip: '显示',
        label: Text('选择日期'),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用persian_modal_date_picker插件的示例代码。这个插件允许你以波斯语(波斯历)的形式显示模态日期选择器。

首先,你需要在你的pubspec.yaml文件中添加这个插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  persian_modal_date_picker: ^latest_version  # 请将latest_version替换为当前最新版本号

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

接下来,你可以在你的Flutter应用中使用PersianModalDatePicker来显示波斯语日期选择器。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:persian_modal_date_picker/persian_modal_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> {
  DateTime? selectedDate;

  void _selectDate(BuildContext context) async {
    final result = await PersianModalDatePicker.showDatePicker(
      context: context,
      initialDate: selectedDate ?? DateTime.now(),
      firstDate: DateTime(1300), // 波斯历起始年份
      lastDate: DateTime(1500), // 波斯历结束年份
    );
    if (result != null && result != selectedDate) {
      setState(() {
        selectedDate = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Persian Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : 'Selected date: ${selectedDate!.toLocal()}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们创建了一个MyApp应用程序,它包含一个MyHomePage页面。
  2. MyHomePage页面包含一个按钮,用于触发日期选择器的显示。
  3. _selectDate方法使用PersianModalDatePicker.showDatePicker来显示日期选择器。
  4. 选择的日期会存储在selectedDate变量中,并显示在界面上。

请注意,波斯历的年份范围可以根据你的需求进行调整。在上面的示例中,我们设置了从1300年到1500年的范围,但你可以根据需要更改这些值。

希望这个示例对你有帮助!

回到顶部