الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

CalendardAtePicker2

منتقي تقويمي خفيف الوزن وقابل للتخصيص استنادًا إلى CalendardAtePicker Flutter ، مع دعم لانتلام تاريخ واحد ومنتقي Range و Multi Picker.

النقش الوضع واحدالنقد متعدد الأوضاعالنقد المدىحوار الوظيفة
وضع واحد وضع متعدد وضع المدى وظيفة الحوار
تمرير واحد التمرير متعدد النطاق التمرير مربع الحوار التمرير

مقدمة

يتكون CalendardAtePicker2 من اثنين من القطرين الرئيسيين:

  • CalendarDatePicker2 ، تتضمن هذه القطعة فقط واجهة المستخدم التقويم وسوف تنبعث منها الحدث كلما قام المستخدم بنقرل تاريخًا مختلفًا.
  • CalendarDatePicker2WithActionButtons ، تتضمن هذه القطعة واجهة مستخدم تقويم وأزرار الإجراءات (إلغاء & موافق). سوف تنبعث هذه القطعة فقط من القيمة المحدثة عندما يقوم المستخدم بنقص "موافق".

سمات

  • يسمح CalendardAtePicker null
  • واجهة مستخدم قابلة للتخصيص للغاية
  • يدعم ثلاثة أوضاع: فردية ومتعددة ومدى
  • يدعم أربع وجهات النظر: اليوم والشهر والسنة والتمرير
  • المدمج في showCalendarDatePicker2Dialog
  • دعم اللغات متعددة
  • دعم المواد 3

ترحيل من 0.xx

الإصدار 1.xx سوف افتراضيا تمكين الشهر منتقي. إذا كنت ترغب في الترحيل إلى v1.xx من v0.xx وترغب في الحفاظ على السلوك القديم ، فستحتاج إلى تعيين disableMonthPicker على true .

كيفية استخدام

تأكد من التحقق من الأمثلة لمزيد من التفاصيل.

تثبيت

أضف السطر التالي إلى pubspec.yaml : 

 dependencies :
calendar_date_picker2 : ^1.1.8

الإعداد الأساسي

المثال الكامل متاح هنا.

يتطلب منك CalendardAtePicker2 توفير config value :

  • يحتوي config على التكوينات لإعداد التقويم الخاص بك وواجهة المستخدم.
  • value هي القيم الأولية التي يتم تمريرها في منتقي التقويم الخاص بك ، يجب أن تكون value List .

عينة العمل الدنيا 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

تكوين منتقي تاريخ واحد

أثناء تهيئة CalendarDatePicker2Config سوف يقوم calendarType الخاص بمثيل التكوين بشكل افتراضي تعيينه إلى CalendarDatePicker2Type.single ، لذلك لا يتعين عليك تعيين نوع التقويم على وجه التحديد.

تكوين منتقيات متعددة التاريخ

من أجل استخدام منتقي تاريخ Multi Mode ، ستحتاج إلى تعيين CalendArtype of Config إلى CalendarDatePicker2Type.multi : 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .multi,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

تكوين منتقي تاريخ المدى

من أجل استخدام منتقي تاريخ وضع النطاق ، ستحتاج إلى تعيين CalendArtype of Config إلى CalendarDatePicker2Type.range : 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .range,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

استخدم طريقة عرض الحوار المدمج

تتضمن هذه الحزمة دعمًا مدمجًا لعرض التقويم كمربع حوار. لاستخدامه ، ستحتاج إلى استدعاء showCalendarDatePicker2Dialog ، والتي تأخذ ثلاث وسيطات مطلوبة: context ، config ، dialogSize : 

...
var results = await showCalendarDatePicker2Dialog (
  context : context,
  config : CalendarDatePicker2WithActionButtonsConfig (),
  dialogSize : const Size ( 325 , 400 ),
  value : _dates,
  borderRadius : BorderRadius . circular ( 15 ),
);
...

خيارات التكوين

ل calendardatePicker2 عنصر واجهة المستخدم

دعوى يكتب وصف
تكوين CalendardatePicker2Config التكوينات المتعلقة واجهة المستخدم بالتقويم
قيمة قائمة <DateTime؟> [DateTime] المحدد الذي يجب أن يعرضه المنتقي.
onvaluechanged valuechanged <list <dateTime >>؟ يسمى عندما تغير التواريخ المحددة
DisplayDmonthdate DateTime؟ تاريخ التحكم في التقويم الشهر المعروض
ondisplayedMonthchanged Valuechanged <DateTime>؟ يسمى عندما ينتقل المستخدم إلى شهر/سنة جديدة في المنتقي تحت وضع عدم الذروة

لـ CalendardAtePicker2Config:

خيار يكتب وصف
Calendartype CalendardAtePicker2type؟ نوع منتقي التقويم ، يحتوي على 3 قيم: واحد ، متعدد ، المدى
RangeBirectional منطقي؟ العلم لتمكين اختيار التواريخ أيضًا بترتيب خلفي خلفي
FirstDate DateTime؟ يمكن لمستخدم وقت DateTime المسموح به تحديد
LastDate DateTime؟ يمكن لأحدث مستخدم مسموح
CurrentDate DateTime؟ وقت البيانات الذي يمثل اليوم والذي سيتم تحديده في التقويم
CalendarViewMode CalendardAtePicker2Mode؟ عرض العرض في البداية لمنتقي التقويم ، مع أربعة خيارات متاحة: اليوم والشهر والسنة والتمرير
التقويم Scrollphysics؟ فيزياء التمرير لعرض شهر التقويم
DynamicCalendarrows منطقي؟ علم لتمكين صفوف التقويم الديناميكي على أساس شهر محدد
يتيحمي ValueseSelection منطقي؟ علم للسيطرة على السلوك [onvaluechanged]
AnimatetodisplayedMonthDate منطقي؟ العلم دائمًا متحركًا إلى المعروض
دلالات رسم خريطة؟ قاموس مخصص لتسميات الدلالات
DisableVibration منطقي؟ العلم لتعطيل الاهتزاز في اختيار التاريخ
WeekdayLabels قائمة <Tring>؟ ملصقات أيام الأسبوع المخصصة ، يجب أن تبدأ يوم الأحد
WeekdayLabelTextStyle TextStyle؟ نمط نص مخصص لتسميات أيام الأسبوع
WeekdayLabelBuilder WeekdayLabelBuilder؟ وظيفة لتوفير السيطرة الكاملة على عنصر واجهة المستخدم يوم الأسبوع
Firstdayofweek int؟ فهرس اليوم الأول من الأسبوع ، حيث 0 يشير إلى الأحد ، و 6 نقاط إلى السبت.
LastMonthicon أداة؟ أيقونة مخصصة للتحكم في زر الشهر الماضي
Hidelastmonthicon منطقي؟ علم لإخفاء أيقونة الشهر الماضي
NextMonthicon أداة؟ أيقونة مخصصة للتحكم في زر الشهر المقبل
HidenextMonthicon منطقي؟ العلم للاختباء أيقونة الشهر المقبل
Controlsheight مزدوج؟ ارتفاع مخصص لارتفاع تبديل التحكم في التقويم
ControlStextStyle TextStyle؟ نمط نصي مخصص للتحكم في تبديل وضع التقويم
CenterAlignModePicker منطقي؟ العلم إلى مركزية تسمية النص العام والشهر في عناصر التحكم
modepickersgap مزدوج؟ مسافة الفجوة المخصصة بين شهري وسنة ملتزمات الوضع
disablemodepicker منطقي؟ علامة لتعطيل وضع منتقي الوضع وإخفاء أيقونة التبديل
modepickertexthandler modepickertexthandler؟ وظيفة للتحكم في وضع منتقي النصي المعروض
ModePickerBuilder ModePickerBuilder؟ وظيفة لتوفير التحكم الكامل في واجهة واجهة المستخدم للمنتقي الوضع
CustommePickericon أداة؟ أيقونة مخصصة لرمز زر منتقي الوضع
useabbrlabelformonthmodepicker منطقي؟ استخدم علامة الاختصار لمنتقي وضع الشهر ، يعمل فقط عند تمكين شهر منتقي
DayViewController pagecontroller؟ وحدة تحكم صفحة مخصصة لعرض يوم التقويم
Daymaxwidth مزدوج؟ أقصى عرض عنصر واجهة المستخدم اليوم. عندما لا يكون [DayMaxWidth] فارغًا ، فسيتجاوز إعدادات الحجم الافتراضي
DearborderRadius الحدود؟ دائرة نصف قطر الحدود المخصصة لمؤشر اليوم
DaytextStyle TextStyle؟ نمط نص مخصص ليوم (أيام) التقويم
TodayTextStyle TextStyle؟ نمط نص مخصص ليوم (يوم) التقويم الحالي
disableddayTextStyle TextStyle؟ نمط نص مخصص ليوم (يوم) التقويم المعاق
DaytextStylepredicate DaytextStylepredicate؟ وظيفة لتوفير التحكم الكامل في نمط النص (يوم) يوم التقويم
SelectedDayhighlightColor لون؟ اليوم المحدد اللون المحدد
SelectedDayTextStyle TextStyle؟ نمط نص مخصص ليوم (يوم) تقويم محدد
SelectableDayPredicate SelectableDayPredicate؟ وظيفة لتوفير السيطرة الكاملة على التواريخ في التقويم يمكن اختيارها
SelectionRangedayTextStyle TextStyle؟ نمط نصي مخصص لليوم (ق) التقويم المحدد
SelectionRangeHighlightColor لون؟ اللون البارز ليوم (أيام) متضمنة في النطاق المحدد
SelectionRangedEcorationpredicate SelectRangedEcorationpredicate؟ مسند لتحديد زخرفة صندوق عنصر واجهة المستخدم اليوم ليوم واحد في نطاق محدد
SelectionRangeHighlightBuilder SelectionRangeHighlightBuilder؟ وظيفة لتوفير التحكم الكامل في تسليط الضوء على Range Picker
DaysplashColor لون؟ لون دفقة عنصر واجهة المستخدم اليومية
نهر النهار دبوس؟ وظيفة لتوفير السيطرة الكاملة على واجهة مستخدم واجهة المستخدم اليوم
DaymodesCrollDirection محور؟ اتجاه تمرير المحور لوضع [calendardatePicker2Mode.Day]
MonthViewController ScrollController؟ وحدة تحكم التمرير المخصصة لعرض شهر التقويم
MonthBuilder MonthBuilder؟ وظيفة لتوفير السيطرة الكاملة على واجهة المستخدم عن القطعة الشهر
Hidemonthpickerdivers منطقي؟ العلم لإخفاء المقسمات في منتقي الشهر
selectablemonthpredicate selectablemonthpredicate؟ وظيفة لتوفير التحكم الكامل في أي شهر في قائمة الشهر يمكن اختياره.
تعطيل منطقي؟ العلم لتعطيل منتقي الشهر
MonthTextStyle TextStyle؟ نمط نص مخصص للشهر (s)
SelectionMonthTextStyle TextStyle؟ نمط نص مخصص للشهر (الشهر) المحدد
تعطيل thextTextyle TextStyle؟ نمط نصي مخصص للشهر (الشهر) المعوقين
YearViewController ScrollController؟ وحدة تحكم التمرير المخصصة لعرض السنة التقويمية
nearborderradius الحدود؟ دائرة نصف قطرها الحدود المخصصة لمؤشر العام
yeartextstyle TextStyle؟ نمط نص مخصص للسنة (s)
SelectionYeartextStyle TextStyle؟ نمط نص مخصص للسنة (S) المحددة
المعطل TextStyle؟ نمط نص مخصص للعام (السنين) المعوقين
مختارة مختارة. وظيفة لتوفير السيطرة الكاملة على أي سنة في قائمة السنة يتم اختيارها.
Yearbuilder Yearbuilder؟ وظيفة لتوفير السيطرة الكاملة على واجهة المستخدم عن القطعة العام
Hideyearpickerdivers منطقي؟ علم لإخفاء المقسمات في منتقي العام
ScrollViewTopheaderTextStyle TextStyle؟ نمط نصي مخصص لعرض التمرير العليا رأس التسميات
hidscrollviewtopheader منطقي؟ العلم لإخفاء رأس تسميات الأسبوع الأعلى على التمرير
HidscrollViewTopheaderDivider منطقي؟ العلم لإخفاء مقسم رأس الملصقات العليا في عرض التمرير
Hidscrollviewmonthweekheader منطقي؟ العلم لإخفاء الشهر تقويم الأسبوع تسميات العلامات على عرض التمرير
ScrollViewConstraints Boxconstraints؟ Boxconstrints لعرض تقويم التمرير ، العمل فقط من أجل وضع التمرير
ScrollViewMontheAerBuilder ScrollViewMonmmonthyearBuilder؟ وظيفة لتوفير السيطرة الكاملة على واجهة مستخدم لمدة عام التقويم
ScrollViewonscrolling ScrollViewonscrolling؟ وظيفة للاسترداد على التمرير على عرض التمرير
ScrollViewController ScrollController؟ وحدة تحكم التمرير المخصصة في عرض تقويم التمرير

بالإضافة إلى التكوينات المذكورة أعلاه ، يحتوي CalendardAtePicker2WithActionButtonsConfig على 9 خيارات إضافية

خيار يكتب وصف
Gapbetweencalendarandbuttons مزدوج؟ الفجوة بين أزرار التقويم وأزرار العمل
CancelButtonTextStyle TextStyle؟ نمط النص لزر إلغاء
Cancelbutton أداة؟ زر إلغاء مخصص
OkButtonTextStyle TextStyle؟ نمط النص لزر موافق
Okbutton أداة؟ زر موافق مخصص
OpenedFromDialog منطقي؟ هل يتم فتح التقويم من مربع الحوار
مغلق منطقي؟ أغلق مربع الحوار بعد أن يقوم المستخدم بنقر فوق الزر "إلغاء"
مغلق منطقي؟ أغلق مربع الحوار بعد أن ينقر المستخدم على الزر "موافق"
ButtonPadding EddesInsets؟ حشوة التفاف المخصصة لأزرار موافق وإلغاء

واجهة المستخدم المخصصة

باستخدام التكوينات أعلاه ، يمكنك إنشاء منتقي التقويم المخصص الخاص بك كحاجتك.

صورةصورةصورة

 CalendarDatePicker2WithActionButtons (
  config : CalendarDatePicker2WithActionButtonsConfig (
    firstDayOfWeek : 1 ,
    calendarType : CalendarDatePicker2Type .range,
    selectedDayTextStyle : TextStyle (color : Colors .white, fontWeight : FontWeight .w700),
    selectedDayHighlightColor : Colors .purple[ 800 ],
    centerAlignModePicker : true ,
    customModePickerIcon : SizedBox (),
    dayBuilder : _yourDayBuilder,
    yearBuilder : _yourYearBuilder,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

دعم متعدد اللغات

تحتوي هذه الحزمة على دعم متعدد اللغات. لتمكينه ، أضف Locale إلى MaterialApp التفاف: 

 MaterialApp (
  localizationsDelegates : GlobalMaterialLocalizations .delegates,
  supportedLocales : const [
    Locale ( 'en' , '' ),
    Locale ( 'zh' , '' ),
    Locale ( 'ru' , '' ),
    Locale ( 'es' , '' ),
    Locale ( 'hi' , '' ),
  ],
  ...
);
صورةصورةصورةصورة
中文рсتمر español हिंदी

مساهمات

لا تتردد في المساهمة في هذا المشروع. ؟ طلبات السحب موضع ترحيب!

هناك بعض النصائح قبل إنشاء العلاقات العامة:

  • يرجى دائمًا إنشاء مشكلة/ميزة قبل رفع العلاقات العامة
  • يرجى دائمًا إنشاء مثال لا يقل عن قابلة للتكرار لمشكلة ما
  • يرجى استخدام امتداد DART الرسمي كتنسيق أو استخدام dart format . -l 80 إذا كنت لا تستخدم VS Code
  • يرجى الاحتفاظ بتغييراتك على الحد الأدنى للنطاق المطلوب (تجنب إدخال تغييرات غير ذات صلة)
  • يرجى اتباع اتفاقية الالتزام هذه عن طريق إضافة feat: أو fix: إلى الالتزام بالعلاقات العامة الخاصة بك
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل