Ajustez le module ui de pythonista3

J'écrirai sur ce que j'ai essayé de comprendre le comportement du module d'interface utilisateur fourni avec Pythonista 3 sur iOS.

En premier

Qu'est-ce que Pythonista3?

Environnement d'exécution Python, éditeur et interprète fonctionnant sous iOS. C'est un excellent élément qui peut atteindre l'endroit qui démange, comme la fonction d'interpolation et la console qui vous permet de vérifier le contenu des variables.

Qu'est-ce qu'un module d'interface utilisateur?

Il s'agit d'un module standard inclus dans Pythonista. Ce n'est pas multifonctionnel, mais il contient l'essentiel.

Il existe un outil GUI appelé UI Designer, mais j'aimerais jouer avec lui en utilisant uniquement des scripts.

Le dessin d'interface utilisateur le plus simple

Rien n'apparaît à l'écran, mais c'est un joli programme d'interface utilisateur (?)

ui01.py

import ui

v = ui.View()
v.present('panel')

Lorsque je l'exécute, rien n'apparaît à l'écran.

Afficher Hello World

Je suis seul si rien n'est fait, alors montrons bonjour Monde

ui02.py

import ui

#Hello World
v = ui.View()

l = ui.Label()
l.text = 'Hello World'
v.add_subview(l)

v.present('panel')

Quelle est la taille de la vue enfant?

Ajoutez une bordure pour faciliter la compréhension.

ui03.py

import ui

#Hello World
v = ui.View()

l = ui.Label()
l.text = 'Hello World'
l.border_width = 2
v.add_subview(l)

v.present('panel')

Je ne pensais pas que c'était un carré.

Essayez d'ajouter deux enfants

S'il était laissé tel quel, il serait affiché en chevauchement, donc le second spécifiait les coordonnées.

ui04.py

import ui

#Hello World
v = ui.View()

l = ui.Label()
l.text = 'Hello'
l.border_width = 2
v.add_subview(l)

l2 = ui.Label()
l2.text = 'World'
l2.border_width = 2
l2.x = 50
l2.y = 110
v.add_subview(l2)

v.present('panel')

Étendre à l'ensemble

Répartissez-le sur tout le panneau.

Postscript Spécifier «WH» pour flex ne signifiait pas l'étaler partout. .. .. Plus à ce sujet plus tard

ui05.py

import ui

#Hello World
v = ui.View()

l = ui.Label()
l.text = 'Hello World'
l.border_width = 2
l.flex = 'WH'
v.add_subview(l)

v.present('panel')

Les caractères sont décalés vers la gauche car l'alignement de l'étiquette n'est pas spécifié.

Afficher la barre de défilement

Il semble que vous pouvez faire défiler lorsque la zone de contenu (content_size) est plus grande que la zone d'affichage. Il semble que vous regardez la zone de View pour s'étendre et se contracter automatiquement à l'aide de flex, vous devrez peut-être faire attention à la façon de spécifier contnt_size.

ui06.py

import ui

label_count = 10
label_height = 100

v = ui.ScrollView()
v.content_size = (100, label_count * label_height)

for i in range(label_count):
	l = ui.Label()
	l.text = 'TestLabel:' + str(i)
	l.y = i * label_height
	l.border_width = 2
	l.flex = 'W'
	
	v.add_subview(l)

v.present('panel')

Enquête d'événement lors de la création d'une vue personnalisée

Faire et vérifier le moment du redessinage et la fréquence des événements. Si le panneau est présent, l'événement tactile peut ne pas être bien pris, donc vérifiez en plein écran. (Cela semble être l'effet de changer d'écran en balayant vers la gauche et la droite)

ui07.py

import ui

class MyView(ui.View):
	def __init__(self):
		l = ui.Label(name='poslabel')
		l.background_color = '#dddddd'
		l.flex = 'W'
		l.height = 50
		self.add_subview(l)
		
		l2 = ui.Label(name='loglabel')
		l2.background_color = '#ddddff'
		l2.flex = 'W'
		l2.number_of_lines = 0
		l2.y = l.height
		l2.height = 600 - l.height
		self.add_subview(l2)
		
		self.m_logs = []
		pass
		
	def log_msg(self, msg):
		self.m_logs.append(msg)
		self['loglabel'].text = "\n".join(self.m_logs[-20:])
		
	def log_touch(self, touch):
		self['poslabel'].text = str(touch.location)
		
	def did_load(self):
		self.log_msg('did_load called.')
		
	def will_close(self):
		self.log_msg('will_close called.')
		
	def draw(self):
		self.log_msg('draw called.')
		
	def layout(self):
		self.log_msg('layout called.')
		
	def touch_began(self, touch):
		self.log_msg('touch_began called.' + str(touch.location))
		self.log_touch(touch)
		
	def touch_moved(self, touch):
		self.log_msg('touch_moved called.' + str(touch.location))
		self.log_touch(touch)
	
	def touch_ended(self, touch):
		self.log_msg('touch_ended called.' + str(touch.location))
		self.log_touch(touch)
		
v = MyView()
v.present('fullscreen')

Même si «WH» est spécifié pour flex, il ne se propage pas sur tout l’écran! ??

J'ai complètement mal compris le flex. Flex ajuste-t-il automatiquement sa taille lorsque la taille du parent change? Même lorsque «WH» était spécifié, il ne correspondait pas à la taille du parent dans l’intention de modifier sa propre taille en fonction du changement de la taille du parent.

Dans ui06.py, ce qui semblait s'étendre sur tout l'écran, c'est que j'ai ajouté une étiquette d'une taille de 100x100 à un enfant avec une vue avec une taille par défaut de 100x100, donc lorsque la taille du parent devient plein écran avec présent, l'enfant aussi Il était seulement étiré et agrandi.

Vous pouvez le voir en procédant comme suit. Ne pas commenter la partie qui remplace la largeur et la hauteur se comportera probablement comme la plupart des gens s'y attendaient.

ui08.py

import ui

v = ui.View()
v.border_color = '#ff0000'
v.border_width = 2
v.background_color = '#999999'

v.present('fullscreen')

l = ui.Label()
l.border_width = 2
l.flex = 'WH'
l.text = 'Label'
#l.width = v.width
#l.height = v.height
v.add_subview(l)