‫Bienvenido de nuevo.
‫Ahora finalmente es el momento de usar la cuadrícula y ya ha visto cómo usar el panel tecnológico antes y el panel de
‫rack y los que hoy están bien apilados y envueltos.
‫Y ahora revisaremos Grid, que nos permite colocar cosas en una cuadrícula, y comenzaremos
‫simplemente usando dos tiempos para cuadrícula.
‫Y, en primer lugar, lo que necesitamos para eso es una columna y una definición de rollo para que podamos seguir adelante y dentro de
‫nuestra cuadrícula.
‫Así que vaya a su archivo Zemel y luego dentro de la cuadrícula, cree una definición de columna de puntos de cuadrícula y aquí puede definir
‫sus diferentes columnas.
‫Entonces, en primer lugar, necesita las definiciones de columna, en plural, y luego puede seguir adelante y
‫crear sus definiciones de columna individuales.
‫Por ejemplo, puede seguir adelante y crear uno aquí.
‫Voy a mantenerlo simple en una línea así.
‫Y lo que quiero definir aquí es simplemente el ancho y el ancho que podría, digamos, ponerlo
‫en 100 y ahora creemos otra columna, que también tendrá 100 de ancho.
‫Ahora, eso no es suficiente.
‫También necesitamos tener filas, excepto que solo queremos tener una habitación.
‫Así que comencemos con una sola fila.
‫Y primero voy a crear un botón.
‫Y este botón dirá algo como, hola, y debería estar en la cuadrícula, esa
‫columna cero.
‫Ahora creo un segundo botón, que debería ser la cuadrícula, esa columna uno.
‫Ahora, si miramos nuestro diseño ahora, podemos ver que tenemos nuestros dos botones.
‫Hola.
‫Ejecutemos nuestro código solo para ver cómo se ve esto.
‫Por cierto, solo hay 100 píxeles de ancho, como puedes ver aquí.
‫Entonces el ancho está limitado a 100 píxeles.
‫Entonces, si agrega un valor total aquí, simplemente lo usará como píxeles en el ancho.
‫Como puede ver aquí, así de ancha es una columna.
‫Y, por supuesto, podríamos decir que podemos poner más columnas aquí fácilmente.
‫Bueno, podemos hacer eso y lo haremos más adelante.
‫Pero antes de hacer eso, me gustaría mostrarles algo muy importante.
‫Entonces, si arrastro mi Zemel aquí ahora, en realidad es útil porque veremos la diferencia en nuestra interfaz de usuario
‫directamente.
‫Y quiero cambiar el ancho de 100 a automático.
‫Y como puede ver lo que hace auto, automáticamente solo toma el ancho que se requiere para caber
‫en todo el contenido que hay dentro del elemento.
‫Entonces, en nuestro caso, el botón tiene un texto llamado Hola, y eso es cuánto espacio alto necesita
‫o requiere.
‫Y así de ancho será nuestro botón.
‫Y como puede ver en la definición de la primera columna, entonces la definición
‫de la primera columna donde está nuestro botón con uno, así es como se cambia el botón o ese es el botón.
‫Como puede ver ahora, ha cambiado a cincuenta y nueve coma cinco píxeles.
‫Si agrego más texto, más texto, puede ver que lo amplía a ciento cincuenta y tres coma
‫cinco píxeles.
‫Por lo tanto, puede continuar fácilmente y usar el modo automático si desea que todo encaje correctamente en función de la cantidad de espacio
‫que realmente necesita.
‫Pero, ¿qué pasa si quiero que las columnas tengan exactamente el mismo ancho?
‫Bueno, por supuesto que podría usar valores completos aquí o valores fijos aquí, pero también puedo usar estrella.
‫Y lo que hará Star es que si todos ellos, todos tienen estrella, simplemente dirá, OK, ocupa todo
‫el espacio.
‫Y en este caso es solo el espacio disponible que tiene esta columna específica, y es exactamente igual que
‫las demás.
‫Entonces hay una espera ahora.
‫Así que este tiene un peso de uno y el otro también tiene un peso de uno.
‫Así que tienen el mismo peso, lo que significa que son iguales solo si queremos cambiar eso, digamos
‫que quiero hacer este segundo botón aquí, el segundo botón el doble de ancho que el primero. Puedo usar estrella
‫doble.
‫Así que ahora este será el doble de ancho que el primero.
‫Si, por ejemplo, quiero tener tres quintos en el lado izquierdo y dos quintos en el lado derecho como su
‫ancho, simplemente puedo usar este enfoque, como puede ver aquí.
‫Así que tres veces la estrella y dos veces para empezar.
‫Entonces, ¿qué es lo que realmente suma todo y luego solo toma la cuenta múltiple de lo que se dice aquí?
‫Digamos que tenemos tres y dos.
‫Entonces, lo que hace, dice, OK, ahora son cinco en total.
‫Unidades que están disponibles y voy a tomar tres quintas partes de esas unidades e incluso podría seguir adelante y hacer algo como
‫100 para que puedan ver que esta toma 100 y esto solo no toma una y solo toma dos.
‫Entonces, así es como puedes jugar con el ancho y lo mismo ocurre con las alturas.
‫Así que ahora sigamos adelante y creemos una definición de rollo.
‫Es tan genial que las definiciones de roles y aquí podemos seguir adelante y crear nuestras propias definiciones.
‫Así que el primero y también lo voy a mantener simple, como en una fila y este necesita una altura.
‫Así que solo voy a decir, está bien, quiero tener la altura de la estrella.
‫Y ahora usamos lo mismo nuevamente para la segunda fila.
‫Y como puede ver ahora tenemos dos filas.
‫Entonces uno aquí y el segundo en la parte inferior.
‫Y como puede ver, la segunda fila aún no tiene contenido.
‫Así que ahora cambiemos eso, digamos, en primer lugar, poniendo este botón aquí en la parte inferior.
‫Derecha.
‫¿Y cómo podemos hacer eso?
‫Bueno, simplemente usamos cuadrícula, punto, fila y decimos que es real.
‫Ahora, podría preguntarse, ¿por qué es ese?
‫¿Por qué no está demasiado bien?
‫Como probablemente ya sepa, en programación comenzamos a contar con cero.
‫Entonces, la primera fila es cero, la segunda fila es uno.
‫Así que ahora está alto en la segunda fila, que es la fila uno.
‫Ahora, sigamos adelante y creemos dos botones más y tal vez incluso cambiemos sus nombres por
‫algo que tenga más que decir sobre su información real.
‫Así que voy a poner eso en la columna cero en la fila uno y, de hecho, voy a volver
‫a ponerlo en cero uno.
‫Y ese se sumará uno.
‫Y en realidad esa será la columna uno y la fila cero así.
‫Así que ahora tenemos todos los botones y ese será uno.
‫Uno será botón a botón tres y botón cuatro.
‫Excelente.
‫Así que ahora, si empezamos con eso, verán que, bueno, también cuenta para los Whitesell.
‫Entonces uno, dos, tres, cuatro.
‫Está bien.
‫Ahora, un pequeño desafío para usted, ya que ha visto cómo usar grandes columnas y filas.
‫Siga adelante y haga una cuadrícula de tres por tres aquí con ocho botones.
‫Entonces uno, dos, ocho deberían ser botones y la novena posición.
‫Por lo tanto, la posición o el elemento de la cuadrícula en la parte inferior derecha debe ser un bloque de texto.
‫Así que por favor publique un video e intente hacerlo.
‫Muy bien, espero que lo hayas probado, así que lo que voy a hacer es agregar otra columna agregando una definición
‫de columna aquí, y tendrá el mismo ancho y la misma altura.
‫Va a tener la misma altura.
‫Y ahora, como puede ver, los botones, se ven un poco raros, pero eso es solo porque no me he alejado todavía.
‫Entonces ahora podemos verlo correctamente.
‫Ahora tenemos nuestros botones con cero uno y así sucesivamente.
‫Así que copiaré ese botón aquí y también colocaré una columna.
‫Entonces Rosero y columna dos.
‫Ahora, por supuesto, podría argumentar que tiene más sentido comenzar con la fila y luego ingresar a
‫la columna mientras puede hacerlo.
‫Pero en mi caso es al revés.
‫Al final, lo que importa es que uses ambos correctamente.
‫Ahora tenemos los tres botones en la parte superior.
‫Ahora sigamos adelante y creemos la segunda fila o finalicemos la segunda fila.
‫Y esa también es la columna.
‫Y voy a copiar eso más tres veces, de hecho.
‫Dos veces es suficiente.
‫Y esa será la fila a la posición cero y la fila a la posición uno o la columna uno.
‫Ahora, por supuesto, necesitamos cambiar los valores.
‫Entonces uno, dos, tres, cuatro, cinco, seis, siete y ocho.
‫Y como dije en la parte inferior izquierda, me gustaría tener un bloque de texto.
‫Entonces, el bloque de texto tiene el mismo enfoque con el grano.
‫Necesitas tener una columna y una fila.
‫Así que solo voy a decir que esta será la columna dos y la fila de la cuadrícula.
‫Dos también.
‫Así que ahora estamos en la parte inferior, a la izquierda o en la parte inferior ahora mismo, podemos salir y darle algo de texto y
‫solo voy a decir algo.
‫Te envío un mensaje de texto ahora, podrías decir, oh, no me gusta.
‫El texto está en la parte superior izquierda.
‫Si bien puede cambiar eso fácilmente con un ..
‫Ingresando algo como alineación horizontal y use el centro aquí.
‫Entonces ahora está centrado horizontalmente.
‫Acerquémonos para que puedas ver.
‫Está bien.
‫Suficiente de uno para centrarlo verticalmente también.
‫Simplemente uso la alineación vertical y también uso el centro aquí.
‫Entonces, como puede ver, el botón está perfectamente centrado e incluso podemos seguir adelante y cambiar el tamaño de
‫fuente solo porque podemos.
‫Y hagámoslo un poco más grande, como 32.
‫Y ahora podemos ver que tenemos una cuadrícula de tres por tres con ocho botones y un texto.
‫Ahora, puede seguir adelante y alinear todos los diferentes tipos de elementos en su ventana aquí y su ventana principal en
‫su cuadrícula.
‫Así que esa es la belleza de usar cuadrículas.
‫Y como has visto, puedes apilar cosas.
‫Puede crear un panel apilado con varias cuadrículas.
‫Y además, tienes un texto en el medio, algo así.
‫Entonces, no está limitado a usar un elemento aquí.
‫Como puede ver, podríamos seguir adelante y poner eso en un panel de pila de paneles apilados como ese.
‫Entonces voy a arrastrar la cuadrícula.
‫Como puede ver ahora, se está quejando porque la ventana principal de Zemel solo conoce la primera.
‫Por lo tanto, solo verá el panel apilado si ahora revisamos nuestra apariencia.
‫De hecho, detengámoslo para que podamos ver cómo dice marcado invertido.
‫Entonces, si tomamos toda la cuadrícula dentro de nuestro panel de pila, como puede ver, está allí y lo ocupa.
‫Entonces, en la parte inferior, hay mucho espacio.
‫Entonces aquí podríamos agregar otro botón.
‫Solo para que veas que esto es posible y este va a estar aquí para tener una altura de cien.
‫Y ahora, como puede ver, todo se acumula en la parte superior.
‫Y aunque tenemos esta altura de que todos tienen la misma altura, este texto necesitaba tanto espacio que
‫lo está ignorando.
‫Entonces el tamaño de la fuente es demasiado grande.
‫Entonces, si volvemos a los 16, todavía es demasiado grande.
‫Si vamos a, digamos, 12.
‫Ahora parece más así.
‫Entonces, siempre que use definiciones reales para esta historia, debe tener cuidado.
‫Si un elemento necesita más espacio del que hay, se desbordará.
‫Está bien.
‫Entonces son dos cuadrículas.
‫Voy a volver a la hermosa cuadrícula estándar que teníamos allí.
‫Y en general, lo que siempre recomiendo después de haber visto algo así y después de haber aprendido
‫algo así, siga adelante y juegue con él.
‫Simplemente juega con algunos tipos diferentes de elementos.
‫Ya ha visto algunos y analizaremos muchos más controles más adelante.
‫Entonces, los que hemos usado hasta ahora son principalmente botones, ¿no?
‫Y bloques de texto.
‫Pero usaremos diferentes controles hermosos en los videos futuros.
‫Así que te veré allí.