Главная страница>Связанные с программированием>Другой исходный код
Скачать

CalendardatePicker2

Легкий и настраиваемый сборщик календаря, основанный на Flutter CalendardatePicker, при поддержке отдельного сборщика даты, сборщика диапазона и Multi Picker.

одномодовый пикерМногомодовый пикерДиапазон-режимДиалоговая функция
Одиночный режим Многообразование Режим диапазона Диалоговая функция
Одиночный свиток Multi Scrolk Диапазон прокрутка диалог свиток

Вступление

CalendardatePicker2 состоит из двух основных виджетов:

  • CalendarDatePicker2 , этот виджет только включает в себя пользовательский интерфейс календаря и будет выделять событие всякий раз, когда пользователь нажимает на другую дату.
  • CalendarDatePicker2WithActionButtons , этот виджет включает в себя календарный пользовательский интерфейс и кнопки действий (Cancel & OK). Этот виджет излучит обновленное значение только тогда, когда пользователь нажимает на кнопку «ОК».

Функции

  • Расширенный календардпикер разрешает null initialdate
  • Настраиваемый пользовательский интерфейс
  • Поддерживает три режима: одиночный, мульти и диапазон
  • Поддерживает четыре просмотра: день, месяц, год и прокрутка
  • Встроенный showCalendarDatePicker2Dialog
  • Многоязычная поддержка
  • Поддержка материала 3

Мигрировать с 0.xx

Версия 1.xx по умолчанию будет включать месяц Picker. Если вы хотите перейти на 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 Date Picker

Чтобы использовать Multi Mode Date Picker, вам нужно будет установить календартип конфигурации в CalendarDatePicker2Type.multi : 

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

Конфигурация даты даты даты

Для использования дистанционного режима Picker, вам нужно будет установить календартип Config to 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] S, которые должен отображать.
OnValueChanged ValueChanged <List <DateTime >>? Вызывается, когда изменились выбранные даты
Отображаемый монтидат DateTime? Дата для управления календарем отображается месяц
ondisplayedmonthchanged ValueChanged <DateTime>? Вызов, когда пользователь переходит к новому месяцу/год в сборщике в режиме без прокрутки

Для CalendardatePicker2config:

Вариант Тип Описание
Календартип CalendardatePicker2type? Тип сборщика календаря имеет 3 значения: одиночный, мульти, диапазон
ЭЛИКОСКАЯ РЕАКТИКА Bool? Флаг, чтобы позволить выбирать даты дальности также в обратном хронологическом порядке
первичный DateTime? Самый ранний допустимый пользователь DateTime может выбрать
Последняя дата DateTime? Последний допустимый пользователь DateTime может выбрать
CurrentDate DateTime? DateTime, представляющее сегодня, которое будет изложено в календаре
CalendarViewMode CalendardatePicker2mode? Первоначально отображаемое представление о сборщике календаря, с четырьмя вариантами: день, месяц, год и прокрутка
Calendarviewscrollphysics Scrollphysics? Физика прокрутки для календарного месяца просмотра
Dynamiccalendarrows Bool? Флаг для включения динамических календарных рядов на основе конкретного месяца
разрешает разъяснение Bool? Флаг для контроля [OnValueChanged] поведения
AnimateToDisplayedMonthDate Bool? Флаг, чтобы всегда оживить отображаемого монтидата
Semanticsdictionary Карта? Пользовательский словарь для семантики лейблы
DISABLEVIBRATION Bool? Флаг, чтобы отключить вибрацию при выборе даты
В будние дни Список <string>? Пользовательские лейблы в будние дни должны начинаться с воскресенья
WeekdayLabelTextStyle TextStyle? Пользовательский текстовый стиль для лейблов в будние дни
Weekdaylabelbuilder Weekdaylabelbuilder? Функция для обеспечения полного контроля над виджетом на лейбл Wayday
первая день int? Индекс первого дня недели, где 0 очков в воскресенье и 6 очков на субботу.
Lastmonthicon Виджет? Пользовательский значок для управления кнопкой в ​​прошлом месяце
Hidelastmonthicon Bool? Флаг, чтобы скрыть значок в прошлом месяце
Nextmonthicon Виджет? Пользовательский значок для управления кнопкой в ​​следующем месяце
Hidenextmonthicon Bool? Флаг, чтобы скрыть значок в следующем месяце
Controlshight двойной? Пользовательская высота для высоты контроля календаря
ControlStextStyle TextStyle? Пользовательский текстовый стиль для управления переключением режима календаря
Centeralignmodepicker Bool? Флаг для централизации текстовой метки года и месяца в элементах управления
Modepickersgap двойной? Пользовательское расстояние разрыва между месяцем и году сборщики режима
DisableModepicker Bool? Флаг, чтобы отключить сборщик режима и скрыть значок переключения
Modepickertexthandler Modepickertexthandler? Функция для управления режимом отображаемого текста.
ModepickerBuilder ModepickerBuilder? Функция для обеспечения полного управления пользовательским интерфейсом режима
Custommodepickericon Виджет? Пользовательский значок для кнопки режима
USEABBRLABELFORMONTHMODEPICER Bool? Используйте метку аббревиатуры для Month Mode Ficker, работает только после включения Month Picker
DayViewController PageController? Пользовательский контроллер страницы для просмотра дня календаря
Daymaxwidth двойной? Максимальная ширина дневного виджета. Когда [DaymaxWidth] не будет нулевой, он будет переопределять настройки размера по умолчанию
Dayborderradius Borderradius? Пользовательский радиус границы для индикатора дня
DayTextStyle TextStyle? Пользовательский текстовый стиль для дня календаря (ы)
Сегодня текстовый стиль TextStyle? Пользовательский текстовый стиль для текущего календарного дня (ы)
DisabledDayTextStyle TextStyle? Пользовательский текстовый стиль для отключенных календарных дней (и)
DayTextStylePredicate DayTextStylePredicate? Функция для обеспечения полного контроля в стиле текста (ы) календаря
SelectedDayHighlightColor Цвет? Выбранный день выделенного цвета
SelectedDayTextStyle TextStyle? Пользовательский текстовый стиль для выбранного дня календаря (ы)
selectabledAypredicate SelectabledayPredicate? Функция, чтобы обеспечить полный контроль над тем, какие даты в календаре могут быть выбраны
selectedRangedAyTextStyle TextStyle? Пользовательский текстовый стиль для выбранного календарного дня (ы) календаря
SelectedRangeHighlightColor Цвет? Основной цвет для дня (ы) включен в выбранную диапазон
SelectedRangedeCoration Predicate SelectedRangedeCoration Predicate? ПРЕДУПРЕЖДЕНИЕ ОПРЕДЕЛИТЬ ДЕНЬ ДЕЙСТВИЯ
SelectedRangeHighlightBuilder SelectedRangeHighlightBuilder? Функция для обеспечения полного контроля над выделением диапазона
DaysPlashcolor Цвет? Виджет цвета всплеска дня
Daybuilder Daybuilder? Функция для обеспечения полного контроля над пользовательским интерфейсом дневного виджета
Daymodescroldiverection Ось? Направление прокрутки оси для режима [calendardatepicker2mode.day]
MonthviewController ScrollController? Пользовательский контроллер прокрутки для просмотра календарного месяца
Месяц -повесток Месячный закусочный? Функция для обеспечения полного контроля над пользовательским интерфейсом Month Widget
HidemonthpickerDividers Bool? Флаг, чтобы скрыть разделители на Picker Month
SelectableMonthPredicate Selectablemonthpredicate? Функция, чтобы обеспечить полный контроль над тем, какой месяц в списке месяца может быть выбрана.
Disablemonthpicker Bool? Флаг, чтобы отключить Month Picker
Месяц TextStyle? Пользовательский текстовый стиль для месяца (ы)
SelectedMonthTextStyle TextStyle? Пользовательский текстовый стиль для выбранного месяца (ы)
DisabledMonthTextStyle TextStyle? Пользовательский текстовый стиль для месяца (ы) отключений
Годовой вертел ScrollController? Пользовательский контроллер прокрутки для календарного года просмотра
Годбордеррадий Borderradius? Пользовательский радиус границы для индикатора года
Годовой текст TextStyle? Пользовательский текстовый стиль для года (ы)
SelectedyEarTextStyle TextStyle? Пользовательский текстовый стиль для выбранного года (ы)
DistabledearTextStyle TextStyle? Пользовательский текстовый стиль для отключенных годов (ы)
Selectableyearpedicate Selectableyearpedicate? Функция, чтобы обеспечить полный контроль над тем, какой год в списке года будет выбран.
Годовой закупочный Годбилдер? Функция для обеспечения полного контроля над пользовательским интерфейсом Годового виджета
hideyearpickerdividers Bool? Флаг, чтобы скрыть разделители на сборщике года
ScrollViewTopheaderTextStyle TextStyle? Пользовательский текстовый стиль для просмотра просмотра верхней недели.
hidescrollviewtophader Bool? Флаг, чтобы скрыть заголовок меток на верхней неделе на Scroll View Picker
hidescrollviewtophederdivider Bool? Флаг, чтобы скрыть верхнюю неделю меток, разделитель заголовка на просмотре прокрутки
hidescrollviewmonthweekheekheader Bool? Флаг, чтобы скрыть МЕСЯЦИОННЫЙ Календарный Неделя.
ScrollViewConstraints BoxConstraints? BoxConstraints для просмотра календаря прокрутки, работа только для режима прокрутки
Scrollviewmonthyearbuilder Scrollviewmonthyearbuilder? Функция для обеспечения полного контроля над календарным календарным пользовательским интерфейсом прокрутки
Scrollviewonscrolling Scrollviewonscrolling? Функция для обратного вызова по прокрутке при просмотре прокрутки
ScrollViewController ScrollController? Пользовательский контроллер прокрутки в календарный вид прокрутки

В дополнение к приведенным выше конфигурациям, CalendardatePicker2withactionButtonSconfig имеет 9 дополнительных вариантов

Вариант Тип Описание
GAPBETWEENCALENDARANDBUTTONS двойной? Разрыв между календарями и кнопками действия
CancelButtonTextStyle TextStyle? Текстовый стиль для отмены кнопки
Cancelbutton Виджет? Пользовательская кнопка отмены
okbuttontextstyle TextStyle? Текстовый стиль для кнопки OK
Окбаттон Виджет? Пользовательская кнопка OK
OpenedFromDialog Bool? Календарь открыт из диалога
закрытый Bool? Диалог закрытия после того, как пользователь нажал кнопку отмены
закрытый Bool? Диалог закрытия после того, как пользователь нажал на кнопку OK
пуговица EdgeInsets? Пользовательская оберточная прокладка для кнопок ОК и отмены

Пользовательский интерфейс

Используя приведенные выше конфигурации, вы можете сделать свой собственный сборщик календаря в качестве необходимости.

изображениеизображениеизображение

 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' , '' ),
  ],
  ...
);
изображениеизображениеизображениеизображение
中文Ррусский Эспаньол हिंदी

Вклад

Не стесняйтесь вносить свой вклад в этот проект. ? Приглашаются запросы на вытягивание!

Есть несколько советов, прежде чем создавать PR:

  • Пожалуйста, всегда создавайте проблему/функцию, прежде чем поднять пиар
  • Пожалуйста, всегда создайте минимальный воспроизводимый пример для проблемы
  • Пожалуйста, используйте официальное расширение DART в качестве формата или используйте dart format . -l 80 Если вы не используете код VS
  • Пожалуйста, сохраните свои изменения в его минимально необходимой области (избегайте введения не связанных изменений)
  • Пожалуйста, следуйте этой конвенции GIT Commit, добавив feat: или fix: к вашему PR Commit
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все