老鐵記得 轉(zhuǎn)發(fā) ，貓哥會呈現(xiàn)更多 Flutter 好文~~~~
微信群 ducafecat
b 站 https://space.bilibili.com/404904528
原文
https://medium.com/flutterdevs/explore-customizable-time-planner-in-flutter-c8108218b52c
參考
正文
[圖片上傳失敗...(image-b11ef9-1628218136905)]
從一開始巷查，F(xiàn)lutter 就是一次偉大的邂逅有序。建造迷人的用戶界面從來沒有這么快。不管你是一個業(yè)余愛好者還是一個有教養(yǎng)的開發(fā)者吮便，要無可救藥地迷戀上 Flutter 并不難笔呀。所有的軟件開發(fā)人員都明白，日期是最棘手的事情髓需。同樣许师，時間表也不是特例。
在移動應(yīng)用程序中，有很多情況下用戶需要輸入出生日期微渠、預(yù)訂機(jī)票搭幻、安排會議等等。
在這個文章逞盆，我們將探索定制的時間規(guī)劃 Flutter檀蹋。我們還將實(shí)現(xiàn)一個演示程序，并創(chuàng)建一個可定制的時間計劃使用時間規(guī)劃器包在您的 Flutter 應(yīng)用程序云芦。
https://pub.dev/packages/time_planner
Introduction
一個愉快的俯逾，簡單的利用，定制的時間規(guī)劃為 Flutter 移動舅逸，桌面和網(wǎng)絡(luò)桌肴。這是一個按時間表向客戶顯示任務(wù)的小部件。每行顯示一個小時琉历，每列顯示一天坠七，但是您可以更改該部分的標(biāo)題并顯示您需要的任何其他內(nèi)容。
這個演示視頻顯示了如何創(chuàng)建一個可定制的時間計劃在 Flutter旗笔。它展示了如何定制的時間計劃將工作彪置，使用您的 Flutter 應(yīng)用程序的時間計劃包。它顯示當(dāng)用戶點(diǎn)擊任何行和列時蝇恶，將創(chuàng)建一個隨機(jī)的時間計劃器拳魁。動畫的。它會顯示在你的設(shè)備上艘包。
屬性
時間計劃器有以下幾個屬性:
- startHour: 這屬性是用來時間從這個開始的猛，它將從 1 開始
- endHour: 這屬性用于此時間結(jié)束，最大值為 24
- headers: 這屬性用于創(chuàng)建天數(shù)想虎，每天是一個 TimePlannerTitle卦尊。你應(yīng)該至少創(chuàng)造一天
- tasks: 這屬性用于在時間計劃器上列出小部件
- style: 這屬性用于時間計劃程序的樣式
- currentTimeAnimation: 這屬性用于小部件加載滾動到動畫的當(dāng)前時間。默認(rèn)值為 true
Implementation
- 第一步: 添加依賴項(xiàng)
將依賴項(xiàng)添加到 pubspec ー yaml 文件舌厨。
time_planner: ^0.0.3
- 第二步: 導(dǎo)入
import 'package:time_planner/time_planner.dart';
- 第三步: 在應(yīng)用程序的根目錄中運(yùn)行 flutter 軟件包岂却。
flutter packages get
代碼
你需要分別在你的代碼中實(shí)現(xiàn)它:
在 lib 文件夾中創(chuàng)建一個名為 main.dart 的新 dart 文件。
首先裙椭，我們創(chuàng)建一個名為變量任務(wù)的 TimePlannerTask 列表躏哩。
List<TimePlannerTask> tasks = [];
我們將創(chuàng)建一個 _addobject ()方法。
void _addObject(BuildContext context) {
List<Color?> colors = [
Colors.purple,
Colors.blue,
Colors.green,
Colors.orange,
Colors.cyan
];
setState(() {
tasks.add(
TimePlannerTask(
color: colors[Random().nextInt(colors.length)],
dateTime: TimePlannerDateTime(
day: Random().nextInt(10),
hour: Random().nextInt(14) + 6,
minutes: Random().nextInt(60)),
minutesDuration: Random().nextInt(90) + 30,
daysDuration: Random().nextInt(4) + 1,
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('You click on time planner object')));
},
child: Text(
'this is a demo',
style: TextStyle(color: Colors.grey[350], fontSize: 12),
),
),
);
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Random task added to time planner!')));
}
在函數(shù)中揉燃，我們將添加 tasks.add ()方法扫尺。在內(nèi)部，我們將添加 TimePlannerTask ()小部件炊汤。在這個小部件中正驻，我們將添加顏色弊攘、日期時間、 minutesDuration 和 daysDuration姑曙。我們還將在用戶點(diǎn)擊時間計劃器時顯示 snackBar 消息襟交。
在正文中，我們將添加 TimePlanner ()小部件伤靠。在內(nèi)部捣域，我們將添加 startHour、 endHour 和 header宴合。在頭文件中焕梅，我們將添加一些 TimePlannerTitle ()。此外形纺，我們還將添加任務(wù)和樣式丘侠。
TimePlanner(
startHour: 2,
endHour: 24,
headers: [
TimePlannerTitle(
date: "7/20/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/21/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/22/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/23/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/24/2021",
title: "saturday",
),
TimePlannerTitle(
date: "7/25/2021",
title: "sunday",
),
TimePlannerTitle(
date: "7/26/2021",
title: "monday",
),
TimePlannerTitle(
date: "7/27/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/28/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/29/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/30/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/31/2021",
title: "Saturday",
),
],
tasks: tasks,
style: TimePlannerStyle(
showScrollBar: true
),
),
現(xiàn)在，我們將創(chuàng)建一個漂浮的 actionbutton ()逐样。
floatingActionButton: FloatingActionButton(
onPressed: () => _addObject(context),
tooltip: 'Add random task',
child: Icon(Icons.add),
),
當(dāng)我們運(yùn)行應(yīng)用程序時，我們應(yīng)該得到屏幕的輸出打肝，就像下面的屏幕截圖一樣脂新。
[圖片上傳失敗...(image-ec502-1628218136905)]
Code File
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_customizable_time_plan/splash_screen.dart';
import 'package:time_planner/time_planner.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(),
home: Splash()
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<TimePlannerTask> tasks = [];
void _addObject(BuildContext context) {
List<Color?> colors = [
Colors.purple,
Colors.blue,
Colors.green,
Colors.orange,
Colors.cyan
];
setState(() {
tasks.add(
TimePlannerTask(
color: colors[Random().nextInt(colors.length)],
dateTime: TimePlannerDateTime(
day: Random().nextInt(10),
hour: Random().nextInt(14) + 6,
minutes: Random().nextInt(60)),
minutesDuration: Random().nextInt(90) + 30,
daysDuration: Random().nextInt(4) + 1,
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('You click on time planner object')));
},
child: Text(
'this is a demo',
style: TextStyle(color: Colors.grey[350], fontSize: 12),
),
),
);
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Random task added to time planner!')));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(widget.title),
centerTitle: true,
),
body: Center(
child: TimePlanner(
startHour: 2,
endHour: 24,
headers: [
TimePlannerTitle(
date: "7/20/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/21/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/22/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/23/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/24/2021",
title: "saturday",
),
TimePlannerTitle(
date: "7/25/2021",
title: "sunday",
),
TimePlannerTitle(
date: "7/26/2021",
title: "monday",
),
TimePlannerTitle(
date: "7/27/2021",
title: "tuesday",
),
TimePlannerTitle(
date: "7/28/2021",
title: "wednesday",
),
TimePlannerTitle(
date: "7/29/2021",
title: "thursday",
),
TimePlannerTitle(
date: "7/30/2021",
title: "friday",
),
TimePlannerTitle(
date: "7/31/2021",
title: "Saturday",
),
],
tasks: tasks,
style: TimePlannerStyle(
showScrollBar: true
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _addObject(context),
tooltip: 'Add random task',
child: Icon(Icons.add),
),
);
}
}
結(jié)語
在這篇文章中，我已經(jīng)簡單地解釋了 Customizable Time Planner 的基本結(jié)構(gòu); 您可以根據(jù)自己的選擇修改這段代碼粗梭。這是一個小規(guī)模的介紹定制時間計劃對用戶交互從我這邊争便，它的工作使用 Flutter。
? 貓哥
往期
開源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新聞客戶端
https://github.com/ducafecat/flutter_learn_news
strapi 手冊譯文
微信討論群 ducafecat
系列集合
譯文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
開源項(xiàng)目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 編程語言基礎(chǔ)
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基礎(chǔ)入門
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 實(shí)戰(zhàn)從零開始 新聞客戶端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 組件開發(fā)
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
