Flutter水平日期选择器插件flutter_horizontal_date_picker的使用
Flutter水平日期选择器插件flutter_horizontal_date_picker的使用
一个用于创建水平日期选择器的Flutter插件。它将有助于您的应用程序。
示例
该插件支持通过[begin]到[end]之间的[itemCount]创建一个日期选择器。通过[itemCount]，它可以分为天数、小时、分钟、秒等，这使得您可以在许多情况下使用此小部件。
import 'package:flutter_horizontal_date_picker/flutter_horizontal_date_picker.dart';
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Material(
child: Column(
children: [
HorizontalDatePicker(
begin: DateTime.now(),
end: DateTime.now().add(Duration(days: 40)),
selected: DateTime.now(),
onSelected: (item) {
// TODO: 在这里添加您的代码
},
itemBuilder: (DateTime itemValue, DateTime? selected) {
var isSelected =
selected?.difference(itemValue).inMilliseconds == 0;
return Text(
itemValue.formatted(pattern: "EEE\ndd/MM\nHH:mm:ss"),
style: TextStyle(
color: isSelected ? Colors.white : Colors.black54,
fontSize: 12,
),
textAlign: TextAlign.center,
);
},
itemCount: 40,
itemSpacing: 12,
),
],
),
);
}
}
开发环境
[✓] Flutter (Channel stable, 3.0.1, on macOS 12.3.1 21E258 darwin-x64, locale en-VN)
• Flutter version 3.0.1 at ~/fvm/versions/stable
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision fb57da5f94 (5 days ago), 2022-05-19 15:50:29 -0700
• Engine revision caaafc5604
• Dart version 2.17.1
• DevTools version 2.12.2
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at ~/Library/Android/sdk
• Platform android-31, build-tools 30.0.3
• ANDROID_HOME = ~/Library/Android/sdk
• ANDROID_SDK_ROOT = ~/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2021.2)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
[✓] VS Code (version 1.67.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.40.0
完整示例
以下是一个完整的示例，展示了如何使用HorizontalDatePicker插件来选择不同粒度（天、小时、分钟、秒）的日期：
import 'package:flutter/material.dart';
import 'package:flutter_horizontal_date_picker/flutter_horizontal_date_picker.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
const int _kSampleItemCountDay = 40;
const int _kSampleItemCountHour = 40;
const int _kSampleItemCountMinute = 50;
const int _kSampleItemCountSecond = 60;
const Duration _kSampleDurationToEndDay = Duration(days: 40);
const Duration _kSampleDurationToEndHour = Duration(hours: 30);
const Duration _kSampleDurationToEndMinute = Duration(minutes: 100);
const Duration _kSampleDurationToEndSecond = Duration(seconds: 120);
class _MyAppState extends State<MyApp> {
DateTime? selected0;
DateTime? selected1;
DateTime? selected2;
DateTime? selected3;
bool use000000 = false;
DateTime get _now => use000000 ? DateTime.now().to000000 : DateTime.now();
[@override](/user/override)
Widget build(BuildContext context) {
if (selected0 == null) {
selected0 = _now.add(Duration(days: 5));
}
return MaterialApp(
title: 'Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Horizontal Date Picker'),
),
body: SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('跳过当前HH:mm:ss'),
Checkbox(
value: use000000,
onChanged: (value) {
setState(() {
use000000 = value ?? false;
});
},
),
],
),
const SizedBox(height: 20),
FittedBox(
child: Text(
"天数:\n$_now 至 ${_now.add(_kSampleDurationToEndDay)}\n$_kSampleItemCountDay 项",
textAlign: TextAlign.center,
),
),
HorizontalDatePicker(
needFocus: true,
begin: _now,
end: _now.add(_kSampleDurationToEndDay),
selected: selected0,
onSelected: (item) {
setState(() {
selected0 = item;
});
},
itemBuilder: (DateTime itemValue, DateTime? selected) {
var isSelected =
selected?.difference(itemValue).inMilliseconds == 0;
return Text(
itemValue.formatted(pattern: "EEE\ndd/MM\nHH:mm:ss"),
style: TextStyle(
color: isSelected ? Colors.white : Colors.black54,
fontSize: 12,
),
textAlign: TextAlign.center,
);
},
itemCount: _kSampleItemCountDay,
itemSpacing: 12,
),
Divider(
height: 12,
),
FittedBox(
child: Text(
"小时:\n$_now 至 ${_now.add(_kSampleDurationToEndHour)}\n$_kSampleItemCountHour 项",
textAlign: TextAlign.center,
),
),
HorizontalDatePicker(
begin: _now,
end: _now.add(_kSampleDurationToEndHour),
selected: selected1,
onSelected: (item) {
setState(() {
selected1 = item;
});
},
itemBuilder: (DateTime itemValue, DateTime? selected) {
var isSelected =
selected?.difference(itemValue).inMilliseconds == 0;
return Text(
itemValue.formatted(pattern: "EEE\ndd/MM\nHH:mm:ss"),
style: TextStyle(
color: isSelected ? Colors.white : Colors.black54,
fontSize: 12,
),
textAlign: TextAlign.center,
);
},
itemCount: _kSampleItemCountHour,
itemSpacing: 12,
),
Divider(
height: 12,
),
FittedBox(
child: Text(
"分钟:\n$_now 至 ${_now.add(_kSampleDurationToEndMinute)}\n$_kSampleItemCountMinute 项",
textAlign: TextAlign.center,
),
),
HorizontalDatePicker(
begin: _now,
end: _now.add(_kSampleDurationToEndMinute),
selected: selected2,
onSelected: (item) {
setState(() {
selected2 = item;
});
},
itemBuilder: (DateTime itemValue, DateTime? selected) {
var isSelected =
selected?.difference(itemValue).inMilliseconds == 0;
return Text(
itemValue.formatted(pattern: "EEE\ndd/MM\nHH:mm:ss"),
style: TextStyle(
color: isSelected ? Colors.white : Colors.black54,
fontSize: 12,
),
textAlign: TextAlign.center,
);
},
itemCount: _kSampleItemCountMinute,
itemSpacing: 12,
),
Divider(
height: 12,
),
FittedBox(
child: Text(
"秒:\n$_now 至 ${_now.add(_kSampleDurationToEndSecond)}\n$_kSampleItemCountSecond 项",
textAlign: TextAlign.center,
),
),
HorizontalDatePicker(
begin: _now,
end: _now.add(_kSampleDurationToEndSecond),
selected: selected3,
onSelected: (item) {
setState(() {
selected3 = item;
});
},
itemBuilder: (DateTime itemValue, DateTime? selected) {
var isSelected =
selected?.difference(itemValue).inMilliseconds == 0;
return Text(
itemValue.formatted(pattern: "EEE\ndd/MM\nHH:mm:ss"),
style: TextStyle(
color: isSelected ? Colors.white : Colors.black54,
fontSize: 12,
),
textAlign: TextAlign.center,
);
},
itemCount: _kSampleItemCountSecond,
itemSpacing: 12,
),
],
),
),
),
);
}
}
更多关于Flutter水平日期选择器插件flutter_horizontal_date_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter水平日期选择器插件flutter_horizontal_date_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter项目中集成并使用flutter_horizontal_date_picker插件的一个示例代码。这个插件允许你以水平滑动的方式选择日期。
首先，确保你已经在pubspec.yaml文件中添加了flutter_horizontal_date_picker依赖：
dependencies:
flutter:
sdk: flutter
flutter_horizontal_date_picker: ^x.y.z # 请将x.y.z替换为最新版本号
然后，运行flutter pub get来获取依赖。
接下来，在你的Flutter项目中，你可以按照以下步骤使用flutter_horizontal_date_picker：
- 导入插件：
在你的Dart文件中导入插件：
import 'package:flutter_horizontal_date_picker/flutter_horizontal_date_picker.dart';
- 使用插件：
下面是一个完整的示例，展示了如何在Scaffold中集成并使用水平日期选择器：
import 'package:flutter/material.dart';
import 'package:flutter_horizontal_date_picker/flutter_horizontal_date_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Horizontal Date Picker Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DateTime? selectedDate;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Horizontal Date Picker Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
selectedDate == null ? 'Select a date' : 'Selected Date: ${selectedDate!.toLocal()}',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
HorizontalDatePicker(
selectedDate: selectedDate,
firstDate: DateTime(2020),
lastDate: DateTime(2030),
onChanged: (DateTime date) {
setState(() {
selectedDate = date;
});
},
onConfirm: (DateTime date) {
setState(() {
selectedDate = date;
});
// 可以在这里添加确认后的逻辑，比如导航到其他页面
print('Confirmed Date: ${date.toLocal()}');
},
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
),
],
),
),
);
}
}
在这个示例中：
HorizontalDatePicker组件用于显示水平日期选择器。selectedDate保存用户选择的日期。firstDate和lastDate定义了可选日期的范围。onChanged回调在日期改变时触发，更新selectedDate状态。onConfirm回调在用户点击确认按钮时触发，同样更新selectedDate状态，并可以在这里添加额外的逻辑。
确保你根据实际需求调整日期范围和样式。希望这个示例对你有帮助！
