Para centrar el contenido en el medio, podemos usar una técnica que ya cubrí
anteriormente, el estilo y, específicamente, flexbox.
Entonces, en nuestro modal tenemos esa vista o en nuestro modal tenemos esa vista, esa es nuestra vista raíz, es
el único elemento en el modal
y, por supuesto, esta vista tiene otros elementos secundarios, pero ese es el único hijo directo de nuestro modal.
Allí, tenemos el estilo del contenedor de entrada que aplicamos y allí, actualmente establecemos una
dirección de fila flexible.
Ahora, por supuesto, podríamos dejar eso, pero diría que en el modo modal si lo presentamos en una
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.
Así que volveré a cambiar esto a la columna o, dado que este es el valor predeterminado, simplemente elimine
esta dirección de flexión y ahora quiero centrar esto horizontal y verticalmente,
y para eso, podemos configurar el contenido de justificación para centrar aquí y alinear los elementos al centro, pero eso
solo no hará el truco.
Puede ver si abre el modal, todavía está en la parte superior
y la razón es que nuestro
contenedor de entrada, por lo que la vista a la que estamos asignando este estilo, por defecto no ocupa todo
el espacio disponible. puede entrar en la vista
circundante, así que en este caso en el modal. El modal teóricamente toma la altura y el ancho completos de
la pantalla, pero la vista simplemente no toma ese espacio disponible
por defecto, así
es como funciona, esa es la configuración predeterminada.
Solo ocupa el espacio que requieren sus hijos, por lo que la
entrada de texto y el botón.
Entonces, la vista esencialmente tiene la altura de la entrada de texto y el
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
aquí y, por cierto, Android simplemente no se actualizó correctamente, es
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
aplica a la vista, en este caso
nuestro estilo de contenedor de entrada aquí y establecer flex en uno aquí. Flex es una propiedad que se usa junto con flexbox
y, como aprendió anteriormente en este módulo, en esta conferencia adicional de flexbox, flex le permite
controlar cuánto espacio ocupan sus diferentes elementos dentro de un flexbox y si es el único elemento,
este simplemente
asegura que este contenedor ocupará todo el espacio disponible.
También puede configurar esto para flexionar dos, el valor exacto no importa aquí si es el único
hijo, pero debe configurar flex para asegurarse de que esto ocupe todo el espacio disponible.
Si no lo hace, solo ocupará tanto espacio como lo hacen sus elementos secundarios, si
configura flex, ocupará tanto espacio como le dé su elemento primario, de modo que el
elemento primario de esa vista,
el modal En este caso da la vista.
Entonces, con Flex One agregado aquí, si ahora guarda esto, en iOS, verá que ahora está bien centrado y para ver
esto también en Android, lo que puede hacer es abrir el selector de tareas, cerrar
esta aplicación aquí y presionar
un aquí para reiniciar esta aplicación en Android, no le
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
la entrada que quiero tener y
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
realmente está teniendo algunos problemas aquí con mi modal, así que cerrémoslo y veamos si
eso se ve
bien, sí, esto es bueno.
Ahora quiero asegurarme de que cuando hacemos clic en agregar aquí, en realidad ahora cerramos el modal.