Obviamente, esta pantalla en este momento no es tan útil y,
por lo tanto, ahora iré al texto que utilicé como ficticio y lo reemplazaré con, digamos, comenzar un nuevo juego, algo así
y debajo de esto, quiero tener un área de entrada con una ligera sombra paralela, por lo que este aspecto de tarjeta típico que
puede conocer de algunas aplicaciones y sitios web donde tiene un cuadro con una ligera sombra paralela detrás,
tal vez algunas esquinas redondeadas.
Quiero recrear eso aquí, así que agregaré una vista aquí, una vista porque nuevamente es un elemento muy flexible, podemos aplicar muchos
estilos allí, podemos agregar nuestra sombra y nuestras esquinas redondeadas allí y luego mantener nuestro contenido
en esa vista,
por lo que es genial para tener un estilo general del contenedor y ahora dentro de esa
vista, quiero tener un texto donde digamos que seleccione un número, por ejemplo, y donde también queremos tener un campo de texto donde los
usuarios puede ingresar algo.
Entonces, agregaré
un componente de entrada de texto que es ese componente incorporado donde los usuarios pueden usar el teclado para ingresar
un valor y aquí, deben ingresar un número. Configuraremos esto y lo diseñaremos en un segundo,
por ahora lo dejaré así y debajo de eso, quiero tener dos botones sentados uno al lado
del otro
y eso es importante, uno al lado del otro, no debajo de cada uno otro que nos permite restablecer
la entrada y elegir una nueva o confirmar la elegida. Por lo tanto, necesitamos una vista aquí porque eso nos permite colocar elementos uno al
lado del otro, mientras que estos elementos se colocan uno encima del otro, porque si solo agregara dos botones aquí,
entonces tendría que cambiar la dirección de flexión de estas vistas para tenerlos a continuación entre sí, pero luego el texto y
la entrada de texto también estarían uno al lado del otro.
Así que ahora agregaré una vista aquí para que en esta vista, la vista circundante, este, este y este componente de vista se
encuentren uno encima del otro, así
que en el eje vertical pero dentro de esta vista, ahora también puedo asegurarme de que los elementos allí se sientan uno al
lado del otro, así que en el eje horizontal y eso es lo que quiero aquí.
Así que importaré el botón incorporado, que es uno de los componentes de la vista que se ajusta
automáticamente a la plataforma subyacente, más adelante en un módulo separado, aprenderá cómo puede averiguar manualmente en qué
plataforma se está ejecutando para ajustar la apariencia de su aplicación para eso.
Aquí, iremos con el botón incorporado y le daremos al primero un título de reinicio y al segundo, el segundo
botón aquí un título de confirmación y luego
aquí, onPress en este momento no hará nada, así que eso es solo un función vacía, solo agregándola para que tengamos
el accesorio ya allí, agregaremos lógica
más tarde y por
ahora, solo tendremos los botones aquí.
Sin embargo, ahora faltará el estilo, como dije, el botón debería estar uno al lado del otro.
Por lo tanto, le daré a esta vista aquí que contiene los botones un estilo que
apunta al objeto de
estilos y allí, digamos un contenedor de botones, este
nombre como siempre depende totalmente de usted y también quiero darle a esta vista que contiene mis entradas un estilo aquí, refiriéndome al objeto
de estilos y usaré el contenedor de entrada, digamos, este nombre,
por supuesto, también depende de usted y aquí, quiero diseñar esto como un título especial, tal
vez con un tamaño de fuente más grande, así que aquí, asignaré un estilo de título, digamos.
Ahora podemos bajar allí en nuestra hoja de estilo y agregar el título, agregar el contenedor de entrada y también agregar el contenedor de botones y
ahora podemos comenzar a agregar algunos estilos allí. Ahora para el título, nuevamente quiero establecer el
tamaño de la fuente, así que estableceré el tamaño de la
fuente de esta manera, establezcamos digamos 20 y quizás también agregue un poco de espacio en el eje vertical con un margen vertical de digamos 10, 10 como esto y
siempre tenga en cuenta que el margen vertical básicamente reemplaza el margen inferior y el margen superior y ahora en el contenedor de botones y volveré al contenedor de
entrada en un segundo, el contenedor de botones obtendrá una dirección de fila flexible, el valor predeterminado es columna,
pero ahora quiero que los elementos se
sientan uno al lado del otro, por lo que debemos
usar la fila aquí
Quiero establecer un ancho aquí porque si no establecemos un ancho en el contenedor de botones, sería tan ancho
como los dos botones están juntos, en su lugar quiero usar el
ancho del elemento primario, así que de esta vista aquí y luego coloque los botones dentro de esta vista, por lo
que quiero hacer
lo contrario, no diseñar la vista de acuerdo con los botones, sino colocar los botones de acuerdo con
la vista.
Así que le daré al contenedor de botones esta vista y un ancho explícito aquí y ahora para colocar los botones allí, podemos
usar
justifyContent para colocarlos a lo largo del eje principal que para la fila de dirección flexible se deja de izquierda
a derecha y allí elegiré el espacio entre para que los botones se asienten en el borde izquierdo y derecho de
esta fila y distribuyan todo el espacio libre disponible entre ellos. También agregue un poco de relleno horizontal aquí para que tengamos un poco
de espacio a la izquierda y derecha dentro de nuestra vista, tal vez 15 para que los botones no se asienten directamente en
los bordes a la izquierda y a la derecha, pero hay
algunos espaciando a la izquierda y derecha. De acuerdo, entonces con
eso, si guardamos esto, vemos lo que no sé de ti,
pero que no se ve tan bien, ¿verdad?
Ahora el problema es que el contenedor de entrada aún no tiene estilos. Sin embargo, el contenedor de entrada contiene todas las entradas, por lo
que los estilos allí se ven un poco fuera de lugar.
Entonces, deberíamos darle un poco de estilo al contenedor de entrada y, allí, quiero agregar un ancho y
ahora puede usar un ancho codificado de 300 píxeles o usar un ancho y un porcentaje.
Ahora agregaré un ancho aquí de 300 pero también agregaré un ancho máximo del 80% para que tengamos un ancho de 300 píxeles, pero si el dispositivo fuera demasiado pequeño,
entonces eso es un poco de capacidad de respuesta que ya agregué aquí, si el el dispositivo sería demasiado pequeño,
nos aseguramos de que nuestro ancho no supere el 80%. Y luego quiero alinear los elementos en el centro,
tenga en cuenta que el contenedor
de entrada es una vista, por lo tanto, utiliza flexbox, utiliza la
columna de dirección de flexión predeterminada y, por lo tanto, con el centro de elementos alineados, colocamos los
elementos en el centro en el eje transversal de izquierda a
derecha, por lo que centramos los elementos horizontalmente. Ahora con eso, ahora esto se ve mucho mejor,
realmente no podemos ver
la entrada, pero eso es lo viejo, ¿verdad?
Tendremos que diseñarlo para que realmente podamos verlo. Sin embargo, vemos los botones y
podemos ver que nuestro diseño general y estilo están tomando alguna forma.
Aún así, todavía no estoy 100% contento con el aspecto de esto.