Flutter波斯语模态日期选择器插件persian_modal_date_picker的使用
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 | 否 | 初始化日期选择器的年份。注意,这只有在同时提供了 initMonth 和 initDay 时才有效 |
initMonth | int | 否 | 与 initYear 相同 |
initDay | int | 否 | 与 initYear 相同 |
border | BorderRadiusGeometry | 否 | 可选的圆角边框 |
yearDirection | YearDirection | 否 | 选择年份的方向。值可以是 YearDirection.backward , YearDirection.forward 和 YearDirection.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
更多关于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'),
),
],
),
),
);
}
}
在这个示例中:
- 我们创建了一个
MyApp
应用程序,它包含一个MyHomePage
页面。 MyHomePage
页面包含一个按钮,用于触发日期选择器的显示。_selectDate
方法使用PersianModalDatePicker.showDatePicker
来显示日期选择器。- 选择的日期会存储在
selectedDate
变量中,并显示在界面上。
请注意,波斯历的年份范围可以根据你的需求进行调整。在上面的示例中,我们设置了从1300年到1500年的范围,但你可以根据需要更改这些值。
希望这个示例对你有帮助!