Control de selección de fecha de flutter usa combate real

Control de selección de fecha de flutter usa combate real

---

La selección de fecha es una función común en el desarrollo de aplicaciones. En este artículo, aprenderemos cómo usar los controles de selección de fecha en Flutter.

Varias formas de visualización de control de calendario

Flutter contiene controles de calendario y tiempo, existen los siguientes:

1. DayPicker: obsoleto. Utilice CalendarDatePicker después de v1.15.3.
2. CalendarDatePicker: el control de selección de fecha posterior a la versión 1.5 reemplaza YearPicker, MonthPicker y DayPicker.
3. CupertinoDatePicker, CupertinoTimerPicker: es el selector de fecha y hora para DatePickerView y TimePickerView en estilo iOS.
4. showDatePicker: selección de fecha emergente.
5. showTimePicker: selección de tiempo emergente.

Entre ellos, showDatePicker y showTimePicker son funciones en lugar de controles.

En este artículo, nos enfocamos en el selector de fecha. En el desarrollo de flutter, generalmente la forma más fácil y rápida es usar showDatePicker para mostrar la ventana emergente de fecha.

Introducción a CalendarDatePicker

Aquí hay una breve introducción al control CalendarDatePicker, porque el interior de la ventana emergente de selección de fecha de showDatePicker está implementado por CalendarDatePicker. Es solo que showDatePicker nos ayudó a encapsularlo, encapsulando el objeto CalendarDatePicker generado en una ventana emergente de diálogo para facilitar las llamadas externas.

Atributos principales de CalendarDatePicker:

• initialDate: Inicializa la fecha seleccionada.
• firstDate: la fecha más temprana que se puede seleccionar.
• lastDate: última fecha opcional.
• currentDate: la fecha actualmente seleccionada
• onDateChanged: la función de devolución de llamada de cambio de fecha seleccionada
• onDisplayedMonthChanged: función de devolución de llamada para el cambio de mes
• initialCalendarMode: estilo selector de fecha
• selectableDayPredicate: función de devolución de llamada para seleccionar fechas

Bueno, centrémonos en la función showDatePicker.

showDatePicker

showDatePicker es una llamada de función del selector de fecha de visualización encapsulado por flutter.

Parámetros principales de showDatePicker

• initialDate: Inicializa la fecha seleccionada.
• firstDate: la fecha más temprana que se puede seleccionar.
• lastDate: última fecha opcional.
• initialDatePickerMode: day: mostrar inicialmente el día, año: seleccionar inicialmente el año.
• textDirection: dirección del texto.
• initialDatePickerMode: el valor es DatePickerMode.day y DatePickerMode.year, que son selecciones de fecha y año.

El valor de retorno del método showDatePicker que llama al selector de fechas es Future, que es un tipo asincrónico, por lo que showDatePicker es un método asincrónico. Después de seleccionar el selector de fecha, queremos saber la fecha seleccionada para facilitar la grabación, este proceso se explicará con dos ejemplos.

showDatePicker combate real 1

Hay dos formas de obtener los datos en el método asincrónico. La primera forma es llamar luego directamente después del método asincrónico.

Use luego para obtener el valor de retorno:

    _showDatePicker() async {
      showDatePicker(
        context: context,
        initialDate: _selectedDate, //初始化选中的日期
        firstDate: DateTime(1986), //可选的最早日期
        lastDate: DateTime(2022), //可选的最晚日期
      ).then((value) {
        setState(() {
          //将选中的值传递出来
          this._date = value;
        });
      });
    }

showDatePicker combate real 2

La segunda forma es tomar la forma async + await.

La implementación es la siguiente:

  _showDataPicker(int type) async {
    var picker = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(1986),
        lastDate: DateTime(DateTime.now().year+2),
        locale: Locale("zh"));//这里使用了国际化
    setState(() {
      if(picker != null){
        _timeTxt.text = dataFormat.formatDate(picker, ['yyyy', '-', 'mm', '-', 'dd']);
      }
    });

Internacionalización de selectores de fecha

Usando el ejemplo anterior, podemos mostrar el control del selector de fechas, pero todavía hay un problema por resolver: el texto en el selector de fechas está en inglés y no ha cambiado con nuestro sistema. Entonces, ¿cómo lo cambiamos a la pantalla china?

Si desea mostrarlo en chino, necesita la configuración de internacionalización. Consulte el artículo anterior "Cómo el componente de calendario de Flutter es compatible con el chino (internacionalización)" .

El efecto es el siguiente:

---

** PD: Para obtener más contenido emocionante, verifique -> "Desarrollo de Flutter"
** PD: Para obtener contenido más emocionante, verifique -> "Desarrollo de Flutter"
** PD: Para obtener contenido más emocionante, verifique -> "Desarrollo de aleteo"