Besiege ui.View.flex in Pythonista3

Ich konnte das Verhalten von pythonista3 nicht vollständig verstehen, daher habe ich verschiedene Flex-Attribute von ui.View ausprobiert, um mein Verständnis zu vertiefen.

Versuchen Sie zuerst die Bewegung

Durch Ziehen der vier Ecken des Bildschirms wird die Größe geändert, sodass Sie die Änderungen in jeder Bewegung visuell überprüfen können.

ui_flex01.py


import ui

class ResizableView(ui.View):
	
	STA_IDLE = 1  #Warten
	STA_MOVE_LT = 2  #Gehe nach links oben
	STA_MOVE_LB = 3  #Gehe nach links unten
	STA_MOVE_RT = 4  #Gehe nach rechts oben
	STA_MOVE_RB = 5
	STA_MOVE = 6
	
	
	def __init__(self):
		self.m_state = self.STA_IDLE
		
	def touch_began(self, touch):
		l = self.width * 0.1
		r = self.width * 0.9
		t = self.height * 0.1
		b = self.height * 0.9
		
		self.m_state = self.STA_IDLE
		
		if touch.location.x < l:
			if touch.location.y < t:
				self.m_state = self.STA_MOVE_LT
			if touch.location.y >= b:
				self.m_state = self.STA_MOVE_LB
		if touch.location.x >= r:
			if touch.location.y < t:
				self.m_state = self.STA_MOVE_RT
			if touch.location.y >= b:
				self.m_state = self.STA_MOVE_RB
		
		if self.m_state == self.STA_IDLE:
			self.m_state = self.STA_MOVE
		
		
	def touch_moved(self, touch):
		s = self.m_state
		vx = touch.location.x - touch.prev_location.x
		vy = touch.location.y - touch.prev_location.y
		
		if s == self.STA_IDLE:
			pass
		elif s == self.STA_MOVE_LT:
			self.x += vx
			self.y += vy
			self.width -= vx
			self.height -= vy
		elif s == self.STA_MOVE_RT:
			self.width += vx
			self.y += vy
			self.height -= vy
		elif s == self.STA_MOVE_LB:
			self.x += vx
			self.width -= vx
			self.height += vy
		elif s == self.STA_MOVE_RB:
			self.width += vx
			self.height += vy
		elif s == self.STA_MOVE:
			self.x += vx
			self.y += vy
		
	def touch_ended(self, touch):
		self.m_state = self.STA_IDLE

datas = (
	('RB',0,0,30,30),
	('LB',270,0,30,30),
	('RT',0,370,30,30),
	('LT',270,370,30,30),
	('W',50,40,200,50),
	('H',50,100,50,250),
	('R',100,100,100,50),
	('L',100,100,100,50),
	('LR',100,100,100,50),
	('RW',100,160,100,50),
	('LW',100,220,100,50),
	('RTW',110,300,50,50),
	('LTH',200,300,50,50),
	('',150,220,100,50),
	('RW',100,280,30,50),
	('RW',150,280,30,50),
	('RW',200,280,30,50),
	('RLW',100,340,30,50),
	('RLW',150,340,30,50),
	('RLW',200,340,30,50),

)

p = ui.View()
v = ResizableView()
v.width = 300
v.height = 400
v.background_color = '#808080'
p.add_subview(v)

for d in datas:
	l = ui.Label()
	l.border_width = 2
	l.alignment = ui.ALIGN_CENTER
	l.text = l.flex = d[0]
	l.frame = (d[1],d[2],d[3],d[4])
	v.add_subview(l)


p.present('fullscreen')
v.width = p.width
v.height = p.height
8874C09C-4259-42BE-8D37-BF99880219CE.png

Flex-Funktionen

Sie können flex so einstellen, dass Ihre Position (x, y) und Größe (Breite, Höhe) automatisch geändert werden, wenn die Größe der übergeordneten Ansicht geändert wird.

Die Zeichen R, B, L, T, W und H können angegeben werden, und es können mehrere Kombinationen angegeben werden.

Standard "", "R", "RB"

Wenn Sie ein leeres Zeichen für Flex angeben, werden x, y, Breite und Höhe durch die Größenänderung der übergeordneten Ansicht nicht beeinflusst. Dies ist das gleiche Verhalten wie bei Angabe von "R" oder "RB".

Am rechten Ende „L“ adsorbiert

Wenn Sie für Flex "L" angeben, erhalten Sie einen flexiblen linken Rand. Wörtlich übersetzt ändert sich der linke Rand flexibel. Wenn Sie es frei übersetzen, bleibt es am rechten Ende der übergeordneten Ansicht.

Dies bedeutet, dass diese Ansicht rechts bleibt, wenn sich die Größe der übergeordneten Ansicht ändert.

An jedem Ende adsorbiert "R", "B", "T"

Wie "L"

"R" wird am linken Rand der übergeordneten Ansicht angehängt "B" wird oben in der übergeordneten Ansicht angehängt. (Standardverhalten) "T" ist am unteren Rand der übergeordneten Ansicht angebracht

Es wird sein.

Persönlich ist die Bedeutung von LRBT genau das Gegenteil, aber bin ich der einzige, der das glaubt?

Folgen Sie der Größe "W", "H"

Wenn Sie "W" angeben, ändert sich die Breite entsprechend der Größenänderung des übergeordneten Elements. Wenn Sie "H" angeben, ändert sich die Höhe entsprechend der Größenänderung des übergeordneten Elements.

Behalten Sie die relative Position in der übergeordneten Ansicht "RL", "BT" bei.

Ich möchte mehrere Schaltflächen in gleichen Intervallen anordnen, auch wenn sich die Größe des übergeordneten Elements ändert. Ich werde es zu diesem Zeitpunkt verwenden. In den meisten Fällen muss auch die Größe geändert werden, daher denke ich, dass neben WH häufig auch „RLW“ und „BTH“ verwendet werden.

Recommended Posts

Besiege ui.View.flex in Pythonista3
Wiederholen Sie Python in Pythonista3 (1) --appex
3D-Zeichnung mit SceneKit in Pythonista
Zeigen Sie Spielkarten in der Pythonista + -Szene nach dem Zufallsprinzip an