Flutter时间选择器插件time_picker_spinner的使用
Flutter时间选择器插件time_picker_spinner的使用
time_picker_spinner
是一个替代默认 Material 时间选择器的插件,它使用了滚动选择器的形式。该插件支持12小时和24小时格式,并允许自定义间隔模式,同时支持阿拉伯语和英语的本地化。
安装
1. 在 pubspec.yaml
文件中添加依赖
dependencies:
time_picker_spinner: any
2. 获取包
你可以通过 IDE 的 GUI 或命令行获取包:
$ flutter pub get
3. 导入 time_picker_spinner.dart
文件
import 'package:time_picker_spinner/time_picker_spinner.dart';
特性
- 支持12小时制和24小时制。
- 支持阿拉伯语和英语的本地化。
使用方法
英文示例
TimePickerSpinner(
locale: const Locale('en', ''),
time: dateTime,
is24HourMode: false,
isShowSeconds: true,
itemHeight: 80,
normalTextStyle: const TextStyle(
fontSize: 24,
),
highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue),
isForce2Digits: true,
onTimeChange: (time) {
setState(() {
dateTime = time;
});
},
)
阿拉伯文示例
TimePickerSpinner(
locale: const Locale('ar', ''),
time: dateTime,
is24HourMode: false,
isShowSeconds: true,
itemHeight: 80,
normalTextStyle: const TextStyle(
fontSize: 24,
),
highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue),
isForce2Digits: true,
onTimeChange: (time) {
setState(() {
dateTime = time;
});
},
)
属性说明
属性 | 类型 | 默认值 |
---|---|---|
time | DateTime | 当前时间 [DateTime.now()] |
minutesInterval | int | 1 |
secondsInterval | int | 1 |
is24HourMode | bool | true |
isShowSeconds | bool | false |
highlightedTextStyle | TextStyle | - |
normalTextStyle | TextStyle | - |
itemHeight | double | 60.0 |
itemWidth | double | 45.0 |
spacing | double | 20.0 |
alignment | AlignmentGeometry | Alignment.centerRight |
isForce2Digits | bool | false |
onTimeChange | TimePickerCallback | - |
locale | Locale | en |
示例代码
以下是一个完整的示例程序,展示如何在应用中使用 time_picker_spinner
插件。
import 'package:flutter/material.dart';
import 'package:time_picker_spinner/time_picker_spinner.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
locale: const Locale('ar'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DateTime dateTime = DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("time_picker_spinner"),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'${dateTime.hour} : ${dateTime.minute}',
style: Theme.of(context).textTheme.headlineMedium,
),
const Divider(),
TimePickerSpinner(
locale: const Locale('ar', ''),
time: dateTime,
is24HourMode: false,
isShowSeconds: false,
itemHeight: 80,
hapticFeedback: true,
normalTextStyle: const TextStyle(
fontSize: 24,
),
highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.blue),
isForce2Digits: true,
onTimeChange: (time) {
setState(() {
dateTime = time;
});
},
)
],
),
),
);
}
}
通过以上步骤,你可以在你的 Flutter 应用中集成并使用 time_picker_spinner
插件来实现时间选择功能。
更多关于Flutter时间选择器插件time_picker_spinner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter时间选择器插件time_picker_spinner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter应用中使用time_picker_spinner
插件的一个示例代码案例。这个插件允许你以旋转选择器(spinner)的形式选择时间。
首先,确保你已经在pubspec.yaml
文件中添加了time_picker_spinner
依赖:
dependencies:
flutter:
sdk: flutter
time_picker_spinner: ^2.0.0 # 请检查最新版本号
然后运行flutter pub get
来安装依赖。
接下来,在你的Dart文件中使用TimePickerSpinner
组件。以下是一个完整的示例,展示如何在一个简单的Flutter应用中集成和使用TimePickerSpinner
:
import 'package:flutter/material.dart';
import 'package:time_picker_spinner/time_picker_spinner.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Time Picker Spinner Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TimeOfDay _selectedTime = TimeOfDay.now();
void _showTimePicker() async {
final TimeOfDay? picked = await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Select Time'),
content: SingleChildScrollView(
child: TimePickerSpinner(
initialTime: _selectedTime,
onChanged: (TimeOfDay value) {
setState(() {
_selectedTime = value;
});
},
),
),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Cancel'),
),
TextButton(
onPressed: () {
setState(() {
_selectedTime = TimeOfDay(
hour: picked!.hour,
minute: picked.minute,
);
});
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
if (picked != null && picked != _selectedTime) {
setState(() {
_selectedTime = picked;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Time Picker Spinner Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Selected Time: ${_selectedTime.format(context)}',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _showTimePicker,
child: Text('Select Time'),
),
],
),
),
);
}
}
代码解释:
- 依赖添加:在
pubspec.yaml
文件中添加time_picker_spinner
依赖。 - 导入包:在Dart文件中导入
time_picker_spinner
包。 - UI结构:
- 使用
MaterialApp
和Scaffold
来构建基本的Flutter应用结构。 - 使用
TimePickerSpinner
组件在对话框中显示时间选择器。
- 使用
- 状态管理:
_selectedTime
变量用于存储选中的时间。_showTimePicker
方法用于显示时间选择器对话框,并在用户选择时间后更新状态。
这个示例展示了如何使用time_picker_spinner
插件来创建一个简单的时间选择器对话框,并处理用户的选择。你可以根据需要对这个示例进行扩展和修改。