Saludos! Hoy volveremos a hablar sobre la biblioteca
KivyMD , un conjunto de widgets para el desarrollo multiplataforma en Python al estilo de Material Design. En este artículo, no revisaré los widgets de KivyMD, como en un
artículo reciente , sino que más bien se tratará de posicionar widgets. Algo así como un tutorial sobre el desarrollo de aplicaciones móviles en Python para principiantes no estará aquí, por lo que si escuchas por primera vez sobre el marco de Kivy, es poco probable que te interese todo esto. Bueno, condujimos bajo el corte!
El otro día descargué la aplicación de demostración Flutter UIKit de Google Play:
Y ahora intentaremos repetir una pantalla desde esta aplicación. Veamos los resultados de inmediato: Aleteo a la izquierda, Kivy y KivyMD a la derecha.
Algunos elementos de la interfaz de usuario son diferentes, no debido a algunas características técnicas, por lo que fue imposible obtener un resultado idéntico, pero pensé que sería más orgánico (por ejemplo, la barra de herramientas negra, en mi opinión, no se ve en absoluto).
Entonces! ¿Qué es sorprendente al mirar la pantalla que vamos a jugar? Diseño frontal de fondo transparente. En Kivy, esta opción es proporcionada por FloatLayout, que le permite colocar widgets y controles uno encima del otro de la siguiente manera:
Esquemáticamente, nuestra pantalla se verá así:
El diseño de esta pantalla es bastante simple:
¿Por qué estoy hablando de FloatLayout si nuestra pantalla se hereda de Screen?
<ProductScreen@Screen>: ...
Solo porque Screen -> RelativeLayout -> FloatLayout.
Todos los widgets en FloatLayout se colocan desde la esquina inferior izquierda, es decir, en la pantalla se les asigna automáticamente la posición (0, 0). En el marcado, no es difícil rastrear el orden de agregar elementos a la pantalla de arriba a abajo:
Si alguien prestó atención, entonces indicamos la posición a un solo widget:
MDToolbar: ... pos_hint: {"top": 1}
Además de las coordenadas específicas (x, y), cada widget en Kivy puede recibir una pista de posición:
pos_hint: {"top": 1}
Entonces, la imagen de fondo inferior ...
BoxLayout: size_hint_y: None height: root.height - toolbar.height FitImage: source: "smokestackheather.jpeg"
... gracias al widget FitImage (biblioteca KivyMD), se estira automáticamente a todo el espacio asignado mientras se mantienen las proporciones de la imagen:
Por defecto, cada widget y diseño en Kivy tiene el 100% del espacio, a menos que se especifique lo contrario. Por ejemplo, si desea agregar un botón a la pantalla, obviamente hará lo siguiente:
from kivy.app import App from kivy.lang import Builder KV = """ Button: text: "Button" """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
Y obtén el resultado:
El botón ocupaba el 100% del espacio. Para colocar un botón en el centro de la pantalla, primero debe establecer el tamaño requerido y, en segundo lugar, indicar dónde se ubicará:
from kivy.app import App from kivy.lang import Builder KV = """ Button: text: "Button" size_hint: None, None size: 100, 50 pos_hint: {"center_y": .5, "center_x": .5} """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
Ahora la imagen ha cambiado:
También puede especificar la propiedad
size_hint , de 0 a 1 (equivalente a 0-100%), es decir, la sugerencia de tamaño:
from kivy.app import App from kivy.lang import Builder KV = """ BoxLayout: Button: text: "Button" size_hint_y: .2 Button: text: "Button" size_hint_y: .1 Button: text: "Button" """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
O lo mismo, pero la pista de ancho (
size_hint_x ):
from kivy.app import App from kivy.lang import Builder KV = """ BoxLayout: Button: text: "Button" size_hint_x: .2 Button: text: "Button" size_hint_x: .1 Button: text: "Button" """ class MyApp(App): def build(self): return Builder.load_string(KV) MyApp().run()
MDToolbar tiene una altura de 56dp, no puede ocupar todo el espacio, y si no le dice que su lugar está en la parte superior, se pegará automáticamente en la parte inferior de la pantalla:
La lista de tarjetas, OrderProductLayout (hablaremos de ello a continuación), es una ScrollView con elementos MDCard y ocupa toda la altura de la pantalla, pero gracias al relleno (valores de sangría en mínimos) parece que se encuentra ligeramente por encima del centro de la pantalla. Bueno, por defecto MDBottomAppBar coloca el ancla en el borde inferior de la pantalla. Por lo tanto, solo MDToolbar indicamos dónde está su lugar.
Ahora veamos qué es el widget OrderProductLayout:
Como puede ver, estas son cuatro tarjetas integradas en ScrillView. A diferencia de la pantalla principal, que se hereda de FloatLayout, aquí todos los widgets se leen de arriba a abajo.
Esto es muy conveniente, ya que existe una clara jerarquía de widgets, una estructura de árbol, y de un vistazo está claro qué widget / control pertenece a qué diseño. En Kivy, el diseño utilizado más comúnmente es BoxLayout, un cuadro que le permite colocar widgets dentro de usted vertical u horizontalmente (de forma predeterminada, el último):
Esto se puede ver más claramente en el siguiente diagrama, donde se usa la orientación horizontal de BoxLayout:
Prohibimos a BoxLayout usar el 100% del espacio -
size_hint_y: None y dicho - su altura será exactamente la misma que la altura del elemento más alto anidado en usted -
height: self.minimum_height .
Lista de imágenes:
Si quisiéramos usar el desplazamiento vertical de la lista, necesitaríamos cambiar el GridLayout de la siguiente manera:
ScrollView: GridLayout: size_hint_y: None height: self.minimum_height cols: 1
Reemplace las filas (columnas) con columnas (
cols ) e indique en el
mínimo no el ancho, sino la altura:
from kivy.app import App from kivy.lang import Builder from kivy.metrics import dp from kivy.uix.button import Button KV = """ ScrollView: GridLayout: id: box size_hint_y: None height: self.minimum_height spacing: "5dp" cols: 1 """ class MyApp(App): def build(self): return Builder.load_string(KV) def on_start(self): for i in range(20): self.root.ids.box.add_widget( Button( text=f"Label {i}", size_hint_y=None, height=dp(40), ) ) MyApp().run()
Las siguientes tarjetas son la elección de color y tamaño (son casi idénticas):
Una característica distintiva del lenguaje de marcado Kv Language no es solo la estructura clara de los widgets, sino también el hecho de que este lenguaje admite algunas características del lenguaje Python. A saber: métodos de llamada, creación / cambio de variables, operaciones lógicas, de E / S y matemáticas ...
Calculando el
valor declarado en
Etiqueta ...
Label: value: 0 text: str(self.value)
... sucede directamente en el marcado en sí:
MDIconButton: on_release: label_value.value -= 1 if label_value.value > 0 else 0
Y nunca creeré que esto (código Flutter) ...
... más lógico y legible que el código Kv Language:
Ayer me preguntaron cómo le está yendo a Kivy con el entorno de desarrollo, ¿hay autocomplits, hotloads y otras comodidades? Con autocomplits, todo está bien si usa PyCharm:
En cuanto a la carga en caliente ... Python es un lenguaje interpretado. Kivy usa Python. En consecuencia, para ver el resultado, no necesita compilar el código, ejecutarlo, verlo / probarlo. Como dije, Kivy no usa API nativas para renderizar la interfaz de usuario, por lo tanto, le permite emular varios modelos de dispositivos y plataformas utilizando el módulo de
pantalla . Es suficiente ejecutar su proyecto con los parámetros necesarios para que la ventana de la aplicación probada se abra en la computadora como si se estuviera ejecutando en un dispositivo real. Suena extraño, pero dado que Kivy extrae de la plataforma al procesar la interfaz de usuario, esto elimina la necesidad de emuladores pesados y lentos para las pruebas. Esto solo se aplica a la interfaz de usuario. Por ejemplo, la aplicación de prueba descrita en este artículo se probó con las opciones de
pantalla -m: droid2, portrait, scale = .75 .
A la izquierda, ejecutándose en un dispositivo móvil, a la derecha, en una computadora:
Lista completa de parámetros del módulo de pantalla: Bueno, y finalmente, el resultado final es el lanzamiento en un dispositivo móvil ...
Lo único que molesta es la velocidad de lanzamiento. ¡Al mismo tiempo, Flutter es simplemente fenomenal!
Espero haber sido útil para alguien, ¡hasta pronto!