hola y bienvenido, soy chris, esta es la segunda parte de la serie de videos de tres partes donde flow habla sobre el desarrollo de mac os versus el desarrollo de aplicaciones ios y le brinda una introducción básica a la creación de aplicaciones para mac os, así que si se perdió la primera parte, simplemente continúe y haga clic justo ahí en esa tarjeta, de lo contrario, espero que disfrutes la segunda parte y estés atento la próxima semana para la tercera parte y si disfrutas el estilo de enseñanza de flow , asegúrate de revisar el código de derechos de flujo de su canal de youtube.
Os, así que vamos a sumergirnos directamente en ellos, hey, equipo de código, este es el piso en esta segunda lección del mini curso de macos. cómo algunas cosas se comportan de manera diferente en comparación con ios la lección está estructurada en tres segmentos en primer lugar, hablaré sobre las ventanas y los tamaños de las ventanas, luego hablaré sobre la vista de navegación y navigati en los enlaces y, por último, le mostraré algunas vistas nuevas que quizás no haya visto antes y también algunos modificadores de vista que son muy específicos para el desarrollo de macos, como siempre, ya he preparado un proyecto de ejemplo y en este caso solo hay un un montón de pantallas diferentes para que podamos ver todas las cosas que están en esta lección déjame ejecutar el proyecto y mostrarte cómo se ve para que sea una sola ventana con una vista de navegación una barra lateral a la izquierda para que podamos navegar a otros detalles vistas y luego como un hola mundo básico y un enlace de navegación en el lado derecho en el panel principal de la vista de navegación si mueve el mouse hacia el borde de la ventana verá que no se puede cambiar el tamaño y eso es porque tiene un marco fijo ahora, este es un concepto muy importante en Mac OS porque en realidad necesita especificar el marco de sus ventanas si solo comento este marco y ejecuto la aplicación nuevamente , verá que ya tiene un tamaño diferente y ahora puedo hazlo muy pequeño d también es muy grande, por lo que tendrá que especificar un marco para su aplicación ahora, a veces desea tener un tamaño específico o, por ejemplo, un ancho de 800 puntos y una altura de 500 puntos, pero otras veces también puede desear capaz de hacerlo más grande para hacer eso , podemos agregar un segundo cuadro con, por ejemplo, un ancho máximo de infinito y una altura máxima de infinito ahora ejecutemos esta aplicación nuevamente y verá que puede haber algunos problemas aquí para que podamos hacerlo como lo más pequeño posible y luego ese es básicamente nuestro tamaño de 800 por 500, pero ahora también tenemos la opción de hacerlo más grande para que todo esto funcione, realmente necesita pensar en las vistas que se muestran dentro de la ventana ahora, por ejemplo aquí la vista de navegación simplemente no se ajusta o llena toda la ventana y para que eso funcione, también necesitaría darle un marco con un ancho máximo de infinito y una altura máxima de infinito en el que no voy a sumergirme demasiado muchos detalles sobre los tamaños de ventana solo quiero que sepas que definitivamente necesita especificarlos si puede elegir un tamaño fijo y si también desea permitir que el usuario haga su aplicación más grande , entonces también debe agregar un ancho máximo y una altura máxima, pero siempre siempre debe tener un tamaño mínimo para que la ventana no se haga demasiado pequeña y todo su contenido desaparezca, ahora hablemos de la vista de navegación y los enlaces de navegación en Mac , como ya le dije en la primera lección, la vista de navegación básicamente se comporta de la misma manera .
Como lo haría en el iPad, por lo que siempre tiene una barra lateral a la izquierda que el usuario puede arrastrar para hacerla más pequeña o más grande, también puede descartarla por completo y luego siempre tiene este panel de detalles en el lado derecho que básicamente es sí muestra la vista a la que ha navegado usando la barra lateral o simplemente una vista inicial en su vista de navegación, echemos un vistazo al código para esto, así que en la estructura de nuestra aplicación solo tengo la vista de contenido y luego en la vista de contenido hay una vista de navegación con dos c niños, en primer lugar, una lista que es la barra lateral en el lado izquierdo aquí y luego también una pila av con un texto de hola mundo y un enlace de navegación con el enlace de navegación del título debajo, así que ese es el v6 aquí en el lado derecho esto solo será se mostrará desde el principio hasta que el usuario haga clic en uno de los enlaces de navegación aquí en la barra lateral y luego se mostrará esa vista, pero quedémonos aquí por un segundo porque hay un concepto muy importante en mac os personalmente espero que esto sea cambie en wdc este año porque realmente no entiendo su decisión aquí, pero si tiene un enlace de navegación en el panel de detalles y si hace clic en él la primera vez que lo hace, se abre una ventana emergente extraña con su vista de destino dentro de pero en los clics posteriores no sucede nada, por lo que su navegación en Mac OS realmente necesita vivir en esa barra lateral aquí ahora, por ejemplo, podríamos hacer clic en cualquiera de estos y luego la navegación funcionaría , incluso admite teclados como curr Precisamente estoy presionando las flechas hacia arriba y hacia abajo en mi teclado.
Todo esto sucede automáticamente, pero es solo un contenido muy importante que debe comprender . Un enlace de navegación en el panel detallado puede no funcionar siempre y probablemente nunca funcionará en Mac OS a partir de switch ui versión 3. como ya estamos aquí en esta pantalla de vista dividida, podemos comenzar con las primeras vistas nuevas que probablemente nunca haya visto antes porque solo existen en mac os y esa es la vista dividida h y la vista dividida v en su código, los usa de la misma manera que usaría una pila v o una pila h con la única diferencia de que el usuario puede arrastrar para cambiar el tamaño de esta vista, por lo que en este ejemplo tengo una vista dividida h con un texto inicial en el lado izquierdo y la vista dividida av en el lado derecho con el texto superior y un texto inferior, así que ahora puedo arrastrar para cambiar el tamaño de la vista dividida por edad y luego también puedo arrastrar para cambiar el tamaño de la vista dividida en v en el lado derecho echemos un vistazo al código para esto para que puedas ver e es realmente básico, ya te dije que es bastante similar a la pila v y la pila h y sí, ese es básicamente el caso, solo usa una vista dividida h en lugar de una pila h y una vista dividida av en lugar de una pila av, pero como siempre en mac os realmente necesito preocuparme por los marcos de las vistas ahora, en este ejemplo, solo le di a cada vista un marco con un ancho máximo de infinito y una altura máxima de infinito debido a que el fondo siempre llena toda la sección izquierda o en esta vista dividida en v el toda la sección superior e inferior ahora esto es realmente importante, tendrá un comportamiento extraño en su aplicación si no especifica marcos infinitos, por ejemplo, podría el usuario arrastrar alrededor de esta vista dividida h y luego partes del lado izquierdo simplemente serán vacío y su vista permanecerá del mismo tamaño, por lo que realmente debe prestar atención para darle a su vista el ancho máximo y la altura máxima correctos si desea usar una vista dividida a continuación, hay dos enfoques muy interesantes que no son 100 específicos para Mac OS pero solo sienten en casa en mac en comparación con ios y esas son las formas de interactuar con el sistema de archivos, por lo que a menudo es posible que desee que su usuario abra un archivo de imagen o un archivo de texto o algo similar y básicamente hay dos opciones diferentes en mac para el usuario para hacer eso, el primero es usar un panel ns que es un kit de aplicación api o la segunda opción sería usar un modificador de vista como importador de archivos o exportador de archivos ahora en este ejemplo he implementado ambas versiones en primer lugar tengo el panel abierto de ns que se crea programáticamente cuando hago clic en este botón y, en segundo lugar, tengo el importador de archivos modificadores de vista que se presenta cuando hago clic en este botón, déjame mostrarte ambos para que puedas ver cómo se comparan, ¿de acuerdo? así que, en primer lugar, el panel n está abierto , solo abre este cuadro de diálogo de archivo aquí que probablemente haya visto miles de veces antes de que pueda seleccionar archivos y bla, bla, bla y luego, al final, haga clic en abrir o cancelar , básicamente hay la misma api para el panel nsafe un Está bien si desea guardar un archivo nuevo y luego el importador de archivos básicamente hace exactamente lo mismo, excepto que no puede arrastrar este importador de archivos, mientras que puede arrastrarlo en el panel abierto de ns.
De ellos están implementados bien, así que, como ya ha visto, tenemos dos botones, uno para el panel abierto de ns, uno para el importador de archivos, repasemos primero este panel abierto porque esa es la antigua API de apkid que probablemente no usará. esto en su código, pero hay algunos casos en los que puede preferir el panel abierto sobre el importador de archivos, por ejemplo, cuando está usando mvvm y desea mostrar el panel desde su modelo de vista, entonces no puede simplemente usar un modificador de vista como el importador de archivos para eso podría ser más fácil en algunos casos simplemente usar el panel abierto ns para hacer que cree un panel abierto puede configurar sus diferentes propiedades como el título o el tipo de contenido permitido para que los tipos de archivos que su usuario pueda elegir y abrir a través de este panel l en nuestro caso, el usuario solo puede abrir archivos de texto y luego hay una API muy extraña aquí que los desarrolladores del kit de aplicaciones pueden conocer, pero el escritorio de interfaz de usuario rápido nunca hemos visto esto.
Todo esto sucede en el hilo principal, por lo que bloquea toda su aplicación mientras el ns open panel se está ejecutando y para presentar un panel simplemente diga panel.run mode esta llamada bloqueará el hilo principal y regresará una vez que el usuario haya abierto un archivo o seleccionado y abra el archivo o presione el botón cancelar cuando han abierto un archivo , devolverá el caso de enumeración, está bien, que es lo que verifica esta verificación aquí, por lo que si ejecutamos el panel , se lo presentamos al usuario y el usuario ha seleccionado un archivo, entonces este código se ejecutará ahora que el ns abre el panel le devuelve una propiedad llamada urls que es solo una matriz de urls URL de archivos locales, por supuesto, no URL web y luego puede hacer lo que quiera con ellos, por supuesto, ahora podría usar estas URL para leer los datos en una cadena o en un objeto de datos o en una imagen o lo que sea er es que está haciendo esto es solo la API para hacerlo, entonces el importador de archivos en realidad es bastante similar, por lo que es solo un modificador de vista y, como siempre, con los modificadores de vista de interfaz de usuario rápidos tienen una propiedad se presenta que es solo un enlace a una variable de estado booleana en este caso también podría vivir en su modelo de vista a través de una propiedad de publicación una vez que ese valor sea verdadero, entonces se presentará el importador de archivos, una vez más tenemos la matriz de tipos de contenido permitidos aquí para que el usuario solo pueda seleccionar archivos de texto y luego También he dicho que permite que la selección múltiple sea verdadera para que el usuario pueda seleccionar varios archivos al mismo tiempo .
En este caso, obtenemos una enumeración de resultados que puede ser exitosa y luego contiene las direcciones URL de los archivos que tiene el usuario. seleccionado o tiene el caso de falla y luego contiene un error simple que luego puede manejar en su sitio. Una cosa importante que también quiero mencionar aquí es que las aplicaciones de mac os viven en un entorno de caja de arena y siempre debe prestar atención. a qué derechos de sandbox necesita su aplicación, por lo que en este caso queremos abrir los archivos seleccionados por el usuario, por lo que tendrá que establecer ese derecho en su proyecto, seleccione la firma y las capacidades de destino y luego en la sección de sandbox de su aplicación aquí, en el archivo seleccionado por el usuario, solo lectura sería será suficiente en este caso si también desea guardar o editar los archivos, por supuesto, debe seleccionar leer y escribir, ya que probablemente ya haya notado que la barra lateral aquí en la ventana de vista de navegación tiene un efecto de desenfoque muy sutil y borra todo lo que sucede detrás de la ventana, así que si lo muevo a tu alrededor, verás que su color cambia ligeramente según lo que haya detrás.
Esto se hace automáticamente si tienes una vista de navegación con una barra lateral, pero si también quieres tenerlo en cualquier otra vista como yo. tengo en este caso, entonces no hay una solución nativa de Swifty Eye para eso, pero creo que esto es algo que realmente quieres hacer con bastante frecuencia, así que solo quiero mostrarte rápidamente cómo se hace eso también un der the hood esto usa una vista de efecto visual ns que es una API de kit de aplicación y para usar esta API de kit de aplicación tiene que hacer básicamente el mismo enfoque que tendría para una API de kit de interfaz de usuario en ios para crear una vista ns representable como una vista de interfaz de usuario representable , haces tu vista ns y luego también puedes actualizar tu vista ns para este efecto visual, no hay nada que actualizar, por lo que es solo una función vacía aquí y para hacer esta vista, solo creamos una vista de efecto visual ns y luego podemos configurar el modo de fusión detrás de la ventana y de esta manera los colores que están detrás de esta ventana de aplicaciones se combinarán y se desenfocarán en el fondo y luego puede configurar este efecto de fondo como lo que yo llamo la vista representable como el fondo de cualquier otra ver así, creo que este es un pequeño toque agradable que hace que las aplicaciones de su mac os se sientan como en casa en macos ahora hay dos modificadores muy pequeños que también están en casa en mac os que probablemente desee agregar básicamente a cada elemento de entrada de ti r swift ui app y el primero es el modificador de ayuda que muestra una pequeña información sobre herramientas cuando el usuario se desplaza sobre una vista, por lo que en este caso, cuando el usuario de yuva se desplaza sobre la vista de texto hello world, muestra esta es una ventana emergente de ayuda en el código, esto es solo una línea, simplemente agregue el modificador de ayuda a su vista y luego inserte una cadena ahora, esta es una cadena localizada, por lo que si su aplicación está localizada y admite diferentes idiomas , también se traducirá automáticamente y, a continuación, también hay atajos de teclado que son muy vitales en mac os porque las personas suelen usar su mac porque quieren ser más rápidos que, por ejemplo, en su ipad o iphone y los atajos de teclado son solo una forma de hacer que la experiencia sea más rápida y fluida ahora, en este caso, tengo un simple botón que puede hacer clic para cambiar el color de primer plano o alternar entre verde y azul y cuando hago clic en el comando shift y u, la acción del botón también se activa, veamos cómo se implementa también muy simple Entonces, solo tengo este botón aquí con una acción regular que solo cambia su propio color de primer plano que se almacena en una variable.
Esto en realidad no es realmente importante. La parte importante es este modificador de método abreviado de teclado. Aquí puede aplicarlo a cualquier botón, por ejemplo y luego, cuando se presiona el botón que representa la letra u junto con los modificadores que se especifican en la segunda mitad de este modificador de vista ahora, en este caso, sería comando y cambio junto con usted, entonces la acción del botón también se activará algo que debe tener en cuenta que sus usuarios profesionales deben tener un flujo de trabajo muy agradable y fluido que ya es suficiente con esta lección hemos cubierto los tamaños de ventana cómo se comportan la vista de navegación y los enlaces de navegación en mac os cómo puede tener vistas redimensionables a través de la vista dividida por edad y vsplit ver cómo puede abrir y guardar archivos en mac os a través del panel abierto ns o el modificador de vista del importador de archivos hemos discutido cómo agregar esa vista de fondo borroso cómo agregue una pequeña información sobre herramientas al pasar el mouse sobre una vista y cómo agregar un atajo de teclado a un botón de interfaz de usuario rápida