1 00:00:02,460 --> 00:00:06,390 Obviamente, esta pantalla en este momento no es tan útil y, 2 00:00:06,390 --> 00:00:13,500 por lo tanto, ahora iré al texto que utilicé como ficticio y lo reemplazaré con, digamos, comenzar un nuevo juego, algo así 3 00:00:13,500 --> 00:00:21,480 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 4 00:00:21,540 --> 00:00:27,420 puede conocer de algunas aplicaciones y sitios web donde tiene un cuadro con una ligera sombra paralela detrás, 5 00:00:27,420 --> 00:00:29,220 tal vez algunas esquinas redondeadas. 6 00:00:29,400 --> 00:00:36,570 Quiero recrear eso aquí, así que agregaré una vista aquí, una vista porque nuevamente es un elemento muy flexible, podemos aplicar muchos 7 00:00:36,600 --> 00:00:42,120 estilos allí, podemos agregar nuestra sombra y nuestras esquinas redondeadas allí y luego mantener nuestro contenido 8 00:00:42,150 --> 00:00:43,460 en esa vista, 9 00:00:43,470 --> 00:00:49,080 por lo que es genial para tener un estilo general del contenedor y ahora dentro de esa 10 00:00:49,080 --> 00:00:56,910 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 11 00:00:57,150 --> 00:00:58,580 usuarios puede ingresar algo. 12 00:00:58,590 --> 00:00:59,310 Entonces, agregaré 13 00:00:59,430 --> 00:01:06,300 un componente de entrada de texto que es ese componente incorporado donde los usuarios pueden usar el teclado para ingresar 14 00:01:06,300 --> 00:01:11,970 un valor y aquí, deben ingresar un número. Configuraremos esto y lo diseñaremos en un segundo, 15 00:01:11,970 --> 00:01:17,820 por ahora lo dejaré así y debajo de eso, quiero tener dos botones sentados uno al lado 16 00:01:17,850 --> 00:01:18,810 del otro 17 00:01:18,810 --> 00:01:25,190 y eso es importante, uno al lado del otro, no debajo de cada uno otro que nos permite restablecer 18 00:01:25,190 --> 00:01:32,510 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 19 00:01:32,660 --> 00:01:37,520 lado del otro, mientras que estos elementos se colocan uno encima del otro, porque si solo agregara dos botones aquí, 20 00:01:37,560 --> 00:01:42,650 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 21 00:01:42,680 --> 00:01:45,420 la entrada de texto también estarían uno al lado del otro. 22 00:01:45,500 --> 00:01:51,950 Así que ahora agregaré una vista aquí para que en esta vista, la vista circundante, este, este y este componente de vista se 23 00:01:52,250 --> 00:01:54,010 encuentren uno encima del otro, así 24 00:01:54,020 --> 00:02:00,590 que en el eje vertical pero dentro de esta vista, ahora también puedo asegurarme de que los elementos allí se sientan uno al 25 00:02:00,590 --> 00:02:05,270 lado del otro, así que en el eje horizontal y eso es lo que quiero aquí. 26 00:02:05,450 --> 00:02:11,480 Así que importaré el botón incorporado, que es uno de los componentes de la vista que se ajusta 27 00:02:11,510 --> 00:02:17,540 automáticamente a la plataforma subyacente, más adelante en un módulo separado, aprenderá cómo puede averiguar manualmente en qué 28 00:02:17,630 --> 00:02:21,990 plataforma se está ejecutando para ajustar la apariencia de su aplicación para eso. 29 00:02:22,220 --> 00:02:29,450 Aquí, iremos con el botón incorporado y le daremos al primero un título de reinicio y al segundo, el segundo 30 00:02:29,510 --> 00:02:32,450 botón aquí un título de confirmación y luego 31 00:02:32,450 --> 00:02:39,740 aquí, onPress en este momento no hará nada, así que eso es solo un función vacía, solo agregándola para que tengamos 32 00:02:39,740 --> 00:02:42,000 el accesorio ya allí, agregaremos lógica 33 00:02:42,050 --> 00:02:43,710 más tarde y por 34 00:02:43,850 --> 00:02:46,140 ahora, solo tendremos los botones aquí. 35 00:02:46,250 --> 00:02:51,330 Sin embargo, ahora faltará el estilo, como dije, el botón debería estar uno al lado del otro. 36 00:02:51,410 --> 00:02:57,170 Por lo tanto, le daré a esta vista aquí que contiene los botones un estilo que 37 00:02:57,170 --> 00:02:59,060 apunta al objeto de 38 00:02:59,060 --> 00:03:02,370 estilos y allí, digamos un contenedor de botones, este 39 00:03:02,520 --> 00:03:10,930 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 40 00:03:10,960 --> 00:03:14,930 de estilos y usaré el contenedor de entrada, digamos, este nombre, 41 00:03:15,040 --> 00:03:20,850 por supuesto, también depende de usted y aquí, quiero diseñar esto como un título especial, tal 42 00:03:20,950 --> 00:03:27,090 vez con un tamaño de fuente más grande, así que aquí, asignaré un estilo de título, digamos. 43 00:03:27,300 --> 00:03:36,900 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 44 00:03:37,080 --> 00:03:43,330 ahora podemos comenzar a agregar algunos estilos allí. Ahora para el título, nuevamente quiero establecer el 45 00:03:43,330 --> 00:03:47,330 tamaño de la fuente, así que estableceré el tamaño de la 46 00:03:47,410 --> 00:03:58,750 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 47 00:03:58,750 --> 00:04:09,750 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 48 00:04:09,990 --> 00:04:17,050 entrada en un segundo, el contenedor de botones obtendrá una dirección de fila flexible, el valor predeterminado es columna, 49 00:04:17,060 --> 00:04:19,780 pero ahora quiero que los elementos se 50 00:04:19,790 --> 00:04:23,790 sientan uno al lado del otro, por lo que debemos 51 00:04:23,790 --> 00:04:25,870 usar la fila aquí 52 00:04:25,870 --> 00:04:31,420 Quiero establecer un ancho aquí porque si no establecemos un ancho en el contenedor de botones, sería tan ancho 53 00:04:31,450 --> 00:04:34,960 como los dos botones están juntos, en su lugar quiero usar el 54 00:04:34,960 --> 00:04:41,050 ancho del elemento primario, así que de esta vista aquí y luego coloque los botones dentro de esta vista, por lo 55 00:04:41,050 --> 00:04:41,880 que quiero hacer 56 00:04:41,890 --> 00:04:47,140 lo contrario, no diseñar la vista de acuerdo con los botones, sino colocar los botones de acuerdo con 57 00:04:47,140 --> 00:04:47,970 la vista. 58 00:04:48,160 --> 00:04:55,150 Así que le daré al contenedor de botones esta vista y un ancho explícito aquí y ahora para colocar los botones allí, podemos 59 00:04:55,150 --> 00:04:55,590 usar 60 00:04:55,690 --> 00:05:01,630 justifyContent para colocarlos a lo largo del eje principal que para la fila de dirección flexible se deja de izquierda 61 00:05:01,630 --> 00:05:07,930 a derecha y allí elegiré el espacio entre para que los botones se asienten en el borde izquierdo y derecho de 62 00:05:07,930 --> 00:05:15,000 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 63 00:05:15,000 --> 00:05:21,660 de espacio a la izquierda y derecha dentro de nuestra vista, tal vez 15 para que los botones no se asienten directamente en 64 00:05:21,660 --> 00:05:24,920 los bordes a la izquierda y a la derecha, pero hay 65 00:05:25,020 --> 00:05:29,420 algunos espaciando a la izquierda y derecha. De acuerdo, entonces con 66 00:05:29,560 --> 00:05:35,240 eso, si guardamos esto, vemos lo que no sé de ti, 67 00:05:35,660 --> 00:05:39,860 pero que no se ve tan bien, ¿verdad? 68 00:05:39,860 --> 00:05:45,650 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 69 00:05:45,650 --> 00:05:48,340 que los estilos allí se ven un poco fuera de lugar. 70 00:05:49,040 --> 00:05:56,000 Entonces, deberíamos darle un poco de estilo al contenedor de entrada y, allí, quiero agregar un ancho y 71 00:05:56,090 --> 00:06:02,690 ahora puede usar un ancho codificado de 300 píxeles o usar un ancho y un porcentaje. 72 00:06:02,990 --> 00:06:11,570 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, 73 00:06:11,570 --> 00:06:17,120 entonces eso es un poco de capacidad de respuesta que ya agregué aquí, si el el dispositivo sería demasiado pequeño, 74 00:06:17,120 --> 00:06:23,300 nos aseguramos de que nuestro ancho no supere el 80%. Y luego quiero alinear los elementos en el centro, 75 00:06:23,300 --> 00:06:25,840 tenga en cuenta que el contenedor 76 00:06:25,850 --> 00:06:29,600 de entrada es una vista, por lo tanto, utiliza flexbox, utiliza la 77 00:06:29,600 --> 00:06:35,420 columna de dirección de flexión predeterminada y, por lo tanto, con el centro de elementos alineados, colocamos los 78 00:06:35,630 --> 00:06:39,240 elementos en el centro en el eje transversal de izquierda a 79 00:06:39,260 --> 00:06:44,500 derecha, por lo que centramos los elementos horizontalmente. Ahora con eso, ahora esto se ve mucho mejor, 80 00:06:44,500 --> 00:06:46,140 realmente no podemos ver 81 00:06:46,180 --> 00:06:48,780 la entrada, pero eso es lo viejo, ¿verdad? 82 00:06:48,970 --> 00:06:53,710 Tendremos que diseñarlo para que realmente podamos verlo. Sin embargo, vemos los botones y 83 00:06:53,710 --> 00:06:57,710 podemos ver que nuestro diseño general y estilo están tomando alguna forma. 84 00:06:58,090 --> 00:07:01,440 Aún así, todavía no estoy 100% contento con el aspecto de esto.