Flutter?日歷組件簡單實(shí)現(xiàn)
更新時(shí)間：2022年08月05日 10:03:39 作者：zeqinjie
這篇文章主要為大家介紹了Flutter?日歷組件簡單實(shí)現(xiàn)的圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
前言
近期有個(gè)業(yè)務(wù)需求，涉及用戶付費(fèi)相關(guān)的計(jì)算，需要一個(gè)日歷組件，組件功能如下：
- 僅支持從明天開始選擇預(yù)定日期
- 僅支持可選范圍內(nèi)的日期
- 日期的選擇是連續(xù)的
- 有個(gè)推薦日期，需要聯(lián)動(dòng)更新
- todo:
- 支持不連續(xù)的日期選擇
Github：tw_calendar
安裝
dependencies: tw_calendar: latest_version
效果
demo 演示
業(yè)務(wù)使用 headerView
使用
配置屬性
/// 開始的年月份
final DateTime firstDate;
/// 結(jié)束的年月份
final DateTime lastDate;
/// 選擇開始日期
final DateTime? selectedStartDate;
/// 選擇結(jié)束日期
final DateTime? selectedEndDate;
/// 點(diǎn)擊方法回調(diào)
final Function? onSelectFinish;
/// 頭部組件
final Widget? headerView;
/// 選擇模式
final TWCalendarListSeletedMode? seletedMode;
/// 月視圖高度，為空則占滿剩余空間
final double? monthBodyHeight;
/// 周視圖高度， 默認(rèn) 48
final double? weekDayHeight;
/// 水平間隙
final double? horizontalSpace;
/// 確認(rèn)周視圖高度， 默認(rèn) 66
final double? ensureViewHeight;
/// 確認(rèn)按鈕的間隙
final EdgeInsetsGeometry? ensureViewPadding;
/// 確認(rèn)按鈕選中顏色
final Color? ensureViewSelectedColor;
/// 確認(rèn)未按鈕選中顏色
final Color? ensureViewUnSelectedColor;
/// 今天的日期的背景顏色
final Color? dayNumberTodayColor;
/// 選中日期背景顏色
final Color? dayNumberSelectedColor;
/// 確認(rèn)按鈕字體大小
final double? ensureTitleFontSize;
/// 點(diǎn)擊回調(diào)
final void Function(DateTime seletedDate, int seletedDays)? onSelectDayRang;
/// 選擇確認(rèn)按鈕 title 回調(diào)
final String Function(
DateTime? selectStartTime, DateTime? selectEndTime, int seletedDays)?
onSelectDayTitle;
DEMO
TWCalendarList(
firstDate: TWCalendarTool.tomorrow,
lastDate: DateTime(2022, 11, 21),
selectedStartDate: DateTime(2022, 9, 2),
selectedEndDate: DateTime(2022, 9, 10),
monthBodyHeight: 300.w,
seletedMode: TWCalendarListSeletedMode.singleSerial,
headerView: Container(
alignment: Alignment.center,
height: 55.w,
child: Text(
'日歷組件',
style: TextStyle(
color: TWColors.tw333333,
fontSize: 18.w,
),
),
),
onSelectDayRang: ((seletedDate, seletedDays) {
print('seletedDate : $seletedDate, seletedDays : $seletedDays');
}),
onSelectFinish: (selectStartTime, selectEndTime) {
print(
'selectStartTime : $selectStartTime, selectEndTime : $selectEndTime');
Navigator.pop(context);
},
)
感謝
參考及修改至 demo: flutter_calendar_list
以上就是Flutter 日歷組件簡單實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Flutter 日歷組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Glide實(shí)現(xiàn)加載圖片顯示進(jìn)度條效果
Glide作為安卓開發(fā)常用的圖片加載庫，有許多實(shí)用而且強(qiáng)大的功能，那么，下面這篇文章主要給大家介紹了利用Glide實(shí)現(xiàn)加載圖片顯示進(jìn)度條效果的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下來一起看看吧。2017-05-05
這篇文章主要為大家詳細(xì)介紹了Kotlin在Android工程中的應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄缮炜s的textview詳解(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
本篇文章主要介紹了Android Tiny集成圖片壓縮框架的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Android系統(tǒng)實(shí)現(xiàn)DroidPlugin插件機(jī)制
這篇文章主要為大家詳細(xì)介紹了Android系統(tǒng)上實(shí)現(xiàn)DroidPlugin插件機(jī)制，可以在無需安裝、修改的情況下運(yùn)行APK文件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android實(shí)現(xiàn)頂部導(dǎo)航欄可點(diǎn)擊可滑動(dòng)效果(仿微信仿豆瓣網(wǎng))
這篇文章主要介紹了 Android實(shí)現(xiàn)頂部導(dǎo)航欄可點(diǎn)擊可滑動(dòng)效果(仿微信仿豆瓣網(wǎng)),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了 Android Parcelable接口使用方法詳解的相關(guān)資料,實(shí)現(xiàn)Parcelable就是為了進(jìn)行序列化，需要的朋友可以參考下2017-08-08
這幾天分析了一下的啟動(dòng)過程，于是乎，今天寫一下Service是如何啟動(dòng)的；?給我的感覺是這些啟動(dòng)過程并不復(fù)雜，千萬不要被一坨一坨的代碼嚇住了，雖然彎彎繞繞不少，重載函數(shù)一個(gè)接著一個(gè)，就向走迷宮一樣，但只要抓住主線閱讀，很快就能找到出口2022-08-08
Android4.4開發(fā)之電池低電量告警提示原理與實(shí)現(xiàn)方法分析
這篇文章主要介紹了Android4.4開發(fā)之電池低電量告警提示原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了Android4.4電池電量警告的原理及相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
丟失Android系統(tǒng)庫或者Conversion to Dalvik format failed with error
這篇文章主要介紹了丟失Android系統(tǒng)庫或者Conversion to Dalvik format failed with error 1錯(cuò)誤的解決方法,分析了Android系統(tǒng)庫丟失及版本問題的處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12