1 00:00:02,560 --> 00:00:08,680 Para centrar el contenido en el medio, podemos usar una técnica que ya cubrí 2 00:00:08,710 --> 00:00:11,500 anteriormente, el estilo y, específicamente, flexbox. 3 00:00:11,500 --> 00:00:17,470 Entonces, en nuestro modal tenemos esa vista o en nuestro modal tenemos esa vista, esa es nuestra vista raíz, es 4 00:00:17,500 --> 00:00:19,400 el único elemento en el modal 5 00:00:19,420 --> 00:00:25,090 y, por supuesto, esta vista tiene otros elementos secundarios, pero ese es el único hijo directo de nuestro modal. 6 00:00:25,180 --> 00:00:29,310 Allí, tenemos el estilo del contenedor de entrada que aplicamos y allí, actualmente establecemos una 7 00:00:29,350 --> 00:00:30,490 dirección de fila flexible. 8 00:00:30,490 --> 00:00:35,170 Ahora, por supuesto, podríamos dejar eso, pero diría que en el modo modal si lo presentamos en una 9 00:00:35,620 --> 00:00:41,230 pantalla completa como esta, en realidad estoy bien con una orientación vertical para que tengamos la entrada y debajo de eso, el botón. 10 00:00:41,610 --> 00:00:48,250 Así que volveré a cambiar esto a la columna o, dado que este es el valor predeterminado, simplemente elimine 11 00:00:48,250 --> 00:00:52,580 esta dirección de flexión y ahora quiero centrar esto horizontal y verticalmente, 12 00:00:52,810 --> 00:00:59,480 y para eso, podemos configurar el contenido de justificación para centrar aquí y alinear los elementos al centro, pero eso 13 00:00:59,680 --> 00:01:01,690 solo no hará el truco. 14 00:01:01,780 --> 00:01:05,710 Puede ver si abre el modal, todavía está en la parte superior 15 00:01:05,800 --> 00:01:07,920 y la razón es que nuestro 16 00:01:07,930 --> 00:01:14,080 contenedor de entrada, por lo que la vista a la que estamos asignando este estilo, por defecto no ocupa todo 17 00:01:14,080 --> 00:01:16,720 el espacio disponible. puede entrar en la vista 18 00:01:16,720 --> 00:01:22,450 circundante, así que en este caso en el modal. El modal teóricamente toma la altura y el ancho completos de 19 00:01:22,480 --> 00:01:25,480 la pantalla, pero la vista simplemente no toma ese espacio disponible 20 00:01:25,480 --> 00:01:26,560 por defecto, así 21 00:01:26,560 --> 00:01:28,630 es como funciona, esa es la configuración predeterminada. 22 00:01:28,630 --> 00:01:31,900 Solo ocupa el espacio que requieren sus hijos, por lo que la 23 00:01:31,900 --> 00:01:33,590 entrada de texto y el botón. 24 00:01:33,730 --> 00:01:38,830 Entonces, la vista esencialmente tiene la altura de la entrada de texto y el 25 00:01:38,980 --> 00:01:47,420 botón combinados y luego también el ancho del elemento secundario más amplio en este caso, por lo que de la entrada de texto 26 00:01:47,420 --> 00:01:51,940 aquí y, por cierto, Android simplemente no se actualizó correctamente, es 27 00:01:51,940 --> 00:02:02,010 por eso que ves esto salida extraña aquí, puedes ignorar eso por ahora. Entonces, para que la vista ocupe todo el espacio disponible aquí, simplemente puede ir al estilo que 28 00:02:02,010 --> 00:02:04,320 aplica a la vista, en este caso 29 00:02:04,320 --> 00:02:11,670 nuestro estilo de contenedor de entrada aquí y establecer flex en uno aquí. Flex es una propiedad que se usa junto con flexbox 30 00:02:12,120 --> 00:02:18,270 y, como aprendió anteriormente en este módulo, en esta conferencia adicional de flexbox, flex le permite 31 00:02:18,480 --> 00:02:25,140 controlar cuánto espacio ocupan sus diferentes elementos dentro de un flexbox y si es el único elemento, 32 00:02:25,140 --> 00:02:26,430 este simplemente 33 00:02:26,430 --> 00:02:29,970 asegura que este contenedor ocupará todo el espacio disponible. 34 00:02:29,970 --> 00:02:34,980 También puede configurar esto para flexionar dos, el valor exacto no importa aquí si es el único 35 00:02:34,980 --> 00:02:39,570 hijo, pero debe configurar flex para asegurarse de que esto ocupe todo el espacio disponible. 36 00:02:39,600 --> 00:02:44,160 Si no lo hace, solo ocupará tanto espacio como lo hacen sus elementos secundarios, si 37 00:02:44,280 --> 00:02:48,850 configura flex, ocupará tanto espacio como le dé su elemento primario, de modo que el 38 00:02:48,900 --> 00:02:50,720 elemento primario de esa vista, 39 00:02:50,730 --> 00:02:52,990 el modal En este caso da la vista. 40 00:02:53,340 --> 00:03:00,650 Entonces, con Flex One agregado aquí, si ahora guarda esto, en iOS, verá que ahora está bien centrado y para ver 41 00:03:00,670 --> 00:03:05,860 esto también en Android, lo que puede hacer es abrir el selector de tareas, cerrar 42 00:03:06,070 --> 00:03:08,210 esta aplicación aquí y presionar 43 00:03:08,320 --> 00:03:11,890 un aquí para reiniciar esta aplicación en Android, no le 44 00:03:11,890 --> 00:03:19,970 gusta el modal como parece y ahora aquí, también lo ves. Ahora el pequeño ajuste es un poco de espacio entre el botón y 45 00:03:20,000 --> 00:03:22,140 la entrada que quiero tener y 46 00:03:22,250 --> 00:03:30,530 para eso, iré a la entrada y agregaré un margen inferior de 10 aquí, pero con eso, estoy bastante contento con eso De nuevo, desafortunadamente Android 47 00:03:30,530 --> 00:03:35,380 realmente está teniendo algunos problemas aquí con mi modal, así que cerrémoslo y veamos si 48 00:03:39,120 --> 00:03:40,430 eso se ve 49 00:03:40,440 --> 00:03:42,000 bien, sí, esto es bueno. 50 00:03:42,000 --> 00:03:47,430 Ahora quiero asegurarme de que cuando hacemos clic en agregar aquí, en realidad ahora cerramos el modal.