Comencemos a diseñar esta aplicación lo primero que veamos acá es una imagen.
Esa imagen no tiene nada de complicado.
Hagamos el Visual Studio nuevamente y dentro de nuestro escafoides yo perfectamente puedo colocar una
imagen pero obviamente voy a ocupar más widgets que en forma de columna.
Entonces lo ideal o lo que me pareciera a mí que tiene sentido porque al final no lo vamos a ver como
columnas pero pareciera que puede ser una columna una columna Enter the Children.
Y aquí vienen todos chillo en posición vertical.
Lo primero sería una imagen entonces y Mazz ustedes pueden usar un Mac perfectamente.
Yo voy a seleccionar aquí una imagen y Mazz from Network o mejor imagen.
Y bien el Werfel el R.L que yo voy a utilizar yo tengo acá en el material adjunto tengo esas búsquedas.
Yo simplemente busqué Lansky y Mazz en Google.
Voy a agarrar la primera que tengo acá está me parece bonita.
No es muy grande pero podríamos ser cualquiera.
Click derecho copiar y madres.
Asegúrese de que ustedes pueden ver esa imagen.
O sea que no los lleva a otra dirección.
Asegúrese que la puedan ver.
Y con esta imagen yo la voy a pegar en el R.L de la misma así como viene grabo los cambios y la imagen
debería de parecer acá vamos bien.
Sigamos.
Ahora lo que sigue es este contenedor de acá como lo habíamos mencionado en la otra pantalla.
Esto tiene pinta de ser un Rou que dentro del rock aquí adentro tenemos como esté este contenedor rojo.
Es otra columna Dios mío no sé qué pasó acá tiene otra columna y dentro de esa columna hay dos textos.
Luego hay otro Willett que es una estrella y otro Willett que es el texto un ícono con el ícono de estrella.
Entonces vamos a implementar esto.
Aquí también regresamos al piso al estudio Coupet justo abajo de la imagen yo pensionar una coma y ahora
definamos ese widget.
Ustedes se acuerdan que yo a lo largo del curso he estado generando nuevos métodos como por ejemplo
construir Rou algo así le podría poner pero este lo voy a dejar directamente en el Chile.
Por qué.
Porque quiero que ustedes noten qué pasaría si yo no lo hago de esa manera.
Entonces comencemos.
Sería un paréntesis Enter.
El robot tiene su Children y acuérdense que los robots sirven para ordenar elementos en forma horizontal.
Ok entonces comenzaríamos con el primer elemento que sería una columna en la cual contiene dos textos.
Ok espero que me sigan acá si no fuera una columna y sólo fueron texto.
No haría falta la columna pero necesito un Colm para poder alineã elementos Children para poder alinear
los elementos de forma uno abajo del otro en forma vertical siempre dentro del robot.
Entonces podríamos tener aquí un texto que diga lago lago con un puente ok lago con un puente Koma se
crean otro y aquí abajo a escribir lo que ustedes quieran.
Un lago que se encuentra en Alemania o ustedes pueden lo que sea y graban los cambios.
Vamos a ver qué tal se ve que lo tenemos bastante pegado aquí al borde.
Y ambos textos son exactamente iguales no tienen diferencia de estilos.
Lo vamos a aplicar pero ahí va tomando forma.
Justo después del widget de columnas justo después de columnas van a poner una coma y recuerden que
aquí estoy dentro del BROU.
Lo ideal aquí hubiera sido separar este widget separarlo en su función independiente para poder controlarlos
de una manera más fácil porque si ustedes notan esto está muy pegado.
Lo que me indicaría que tengo que poner algún PADI algún container algo para separarlo y eso va a ir
añadiéndole lógica y cosas que van a hacer este Whittier un poco más complicado.
Y no es bueno que todos se encuentren directamente en el body a menos que sea bastante simple dicho
body.
Pero nuestro Body empieza a crecer en complejidad.
Y bueno ustedes saben mejor que nadie qué tan difícil será para ustedes darle mantenimiento a este código
que estamos escribiendo.
Ok.
Justo después de la columna vendría nuestro ícono de la estrella.
Entonces aquí lo voy a poner con paréntesis de icons punto.
Está ahí está la estrella goma de su color su color de color X.Org ese color rojo.
Voy a grabar los cambios si la estrella aparece al lado.
Perfecto para eso parece que está un poquito pequeña.
Podríamos ponerle también el mismo propiedad del iPod puedo poner el 6 y lo dejamos de 30 puntos cero
píxeles y grabo los cambios.
La estrella de Aries es un poco más grande y perfecto la voy a dejar ahí.
Si miramos la documentación que les pasé luego viene otro texto con el número 41.
Entonces aquí vendría una coma porque estamos dentro de la lista que hace referencia al robot.
Estamos acá por eso no es un punto y coma Enter.
Aquí vendría un texto que con el valor de 41 41 tenga su estilo y podríamos hacer la fuente un poquito
más grande aquí sería con un Textile podremos poner Gil Fosis de unos 20 .0 píxeles y grabo los cambios.
Ok ya tenemos hoy aquí pasan varias cosas.
1 El texto no está alineado a la derecha porque si nosotros lo vemos como parece acá hay una separación.
Ambos textos están alineados a la izquierda perdón y luego que otra separación.
Esto está al final entonces tenemos que hacer trabajo acá.
Regresemos a la aplicación.
Cómo podemos arreglar esto.
Todo el rollo.
Bueno empecemos con los textos en los textos.
Vamos a cambiarlos aquí arriba del video.
O mejor dicho aquí en el Stiles Willett voy a crear dos propiedades para manejar los estilos de esas
dos cajas de texto por ejemplo final final.
Estilo título.
Va a ser igual.
Tex está en paréntesis que tiene su iPhone 6.
Pongámoslo de unos 20.6 píxeles como un iPhone.
O sea aún el ancho de la Fuente y búsquense Font guais puntos Bolt.
O sea un texto bastante ancho y pone punto y coma.
Clona en la línea o sea una copia de la misma y aquí abajo van a poner estilo.
Subtitulo vamos despacio saca el subtítulo va a ser un poco más pequeño va a ser de unos 18 píxeles
el fondo lo vamos a borrar.
Quiero que sea normal pero voy a ponerle el color de Colors.
Punto.
Gray este que está acá y grabemos los cambios.
Ahora tengo un estilo título y un estilo subtitulo esos estilos se los voy a aplicar a esos dos textos.
Entonces Joma estáel Stein y aquí sería el título Star o el estilo título.
No hace falta desacomoda para finalizar esto lo voy a copiar no voy a pegar aquí abajo y aquí sería
estilo subtitulo espacio grabo los cambios y ya deberían de verse de esa manera o que todavía no se
ve.
Se ve parecido a esto pero todavía hay cosas que no.
Ok entonces vamos a ver ok entonces comencemos alineando el contenido de esta columna todo hacia la
izquierda dentro de la columna.
Recuerden que tenemos el main acceso a la Hemming y el cross Axis alignment en una columna donde todo
se ordena de forma vertical.
Si nosotros queremos alinear sus ítems hacia la izquierda recuerden que esto ya es la posición.
Entonces esto sería el cross Axis al Haymon en una columna el cross es como decir el alignment secundario
que tienen el roll o las columnas.
Recuerden que en un Rou el main Axis es horizontal por lo cual el cross Axis A la Emen sería vertical.
En mi caso sería un Crosa Axis alignment de un cross Axis Hemen Start y grabo los cambios.
Ambos textos deberían expresar alineados de esa manera perfecto va tomando cierta forma.
Sigamos.
Podríamos hacer el texto un poquito más chiquito para que no quede así luego podríamos agregarle el
elipses ustedes ya saben por qué lo hemos utilizado.
Un lago un lago en Alemania podríamos dejarlo así para que se mire mejor que ahí tenemos ya errores
visuales más claros.
Sigamos.
Ahora cómo hago para hacer una separación entre estos dos textos.
Porque si nos fijamos en la imagen había un margen más grande acá hay muchas maneras de hacerlo.
Uno de ellos es agregar un six Box que es bastante utilizado para hacer este tipo de separaciones.
Voy a poner un Jaitt de 7.0.
Si se preguntan cómo es que sé todo esto o sea todos las dimensiones que estoy colocando es porque yo
hice el ejercicio previamente.
Entonces ya lo probé para que ustedes no tengan que batear pero si ustedes no les gusta digamos que
fuera muy poco digamos que empezaron con uno y dicen No todavía queda muy pegado.
Bueno pongamos 5.
Todavía queda muy pegado pongamos 50 o no hay mucha separación entonces pareciera que lo ideal es 7.
La ventaja del otro lado es que lo hace tan rápido que ustedes pueden usarlo para hacer este tipo de
pruebas.
OK.
Lo demás pareciera estar bien pero tenemos un problema con la alineación tenemos varios cosaca empezando
con que todo queda muy pegado.
Entonces este Rog que es el que contiene todos los elementos que están acá lo voy a envolver en una
columna.
Entonces dejo el cursor sobre la palabra ROP control punto o como un punto y lo voy a volver en un container.
Si ustedes no tuvieran ese container entonces sería lo mismo que no volvieran en un widget pero yo voy
a seleccionar un container entonces al agregarlos dentro del container y grabar los cambios van a notar
que no pasa absolutamente nada pero el container está ahí container está envolviendo todos esos elementos
dentro del container puedo poner un Padín para hacer una separación interna.
El padre recibe un eje Insect aquí un geómetra Insect.
Entonces voy a colocar aquí un eje insert será simétrico porque quiero cambiar la posición horizontal
y vertical de maneras iguales entonces horizontal.
Voy a poner una separación de 30 puntos cero píxeles.
Perfecto y en la parte vertical voy a colocar una separación de 20 puntos cero.
Recuerden que ustedes pueden cambiar estos valores como mejor les plazca o como ustedes crean que el
ojo les da.
Aquí sería bastante prueba y error hasta que quede bien.
Ahora yo quiero que el texto esta columna que tengo acá que mis textos abarquen el ancho completo disponible
que tiene este contenedor.
Para eso pueden volver esta columna en otro Willett lo van a buscar y se llama envolver con un widget
y el widget se llama expanded.
Ya lo hemos usado antes expanden guardan cambios este widget expande lo que hace es que dice Ok este
icono y este texto tienen cierta cantidad de pixeles que lo dejan así pero el expandiã dice que tome
todo el espacio que queda todo el espacio posible sin robarle sus dimensiones al texto y al icono.
Si ustedes tuvieran otro Wille de acá entonces el expanded sería un poquito más pequeño pero si ustedes
se fijan esto ya pareciera que pareciera bastante bien.
Recuerden que el contenedor mantiene el Padín y tendremos esta separación así lo voy a dejar de esta
manera y vamos a continuar en la siguiente clase trabajando con nuestro diseño pero hemos hecho varios
avances lo dejamos así.
Continuamos con las siguientes.