Following on from Last time, I will explain until I get tired of breaking blocks. Now that we have configured the widget tree, this time we will explain how to make the placed widgets related.
Now, what is the relationship between widgets in the Widget tree in the first place? To give a simple example, when you press a button located in the widget tree, another widget inside the widget tree (for example, the value of the label) changes. Basically, we will configure a GUI with functions in the flow of "configuring a Widget tree using various widgets ⇒ making relationships between each widget".
Now, let's build the relationship between widgets by using the widget tree we created last time. The result and conceptual diagram of the previous Widget tree are shown below. This time, let's try to increase the number displayed on label2 by pressing button1 (children1) and decrease it by pressing button2 (children2).
First, rewrite the build function of the testApp class to display the number on label2. (Since we will create subclasses plusButton and minusButton of Button class later, we have changed the instantiation to match them.)
python
class testApp(App):
def build(self):
#Generate Boxlayout, plusButton, minusButton, Label
layout1 = BoxLayout(orientation='vertical')
button1 = plusButton(text='children1')
layout2 = BoxLayout(orientation='horizontal')
label2 = Label()
button2 = minusButton(text='children2')
#Added button2 and label2 as child widgets of layout2
layout2.add_widget(button2)
layout2.add_widget(label2)
#Added button1 and layout2 as child widgets of layout1
layout1.add_widget(button1)
layout1.add_widget(layout2)
#Display of initial value on Label2
label2.value = 100
label2.text=str(label2.value)
return layout1
It is almost the same as the last time, but the initial value of 100 is stored in the variable value given to label2, and the value of value is displayed as a character string in label2.
Next is to create a relationship between widgets, which is the miso of this time. I want to change the value of label2 by pressing Button, but since simple Button does not have such a function, I will create a subclass of Button class and add a function. At this time, the relative position in the widget tree is important. The following is the subclass generation part.
python
#Increase the number of label2 when you press Button
class plusButton(Button):
def on_press(self):
#Specifying the position of label2 when viewed from button1
label = self.parent.children[0].children[0]
#Change in label value and display
label.value = label.value+1
label.text = str(label.value)
#Decrease the number of label2 when you press Button
class minusButton(Button):
def on_press(self):
#Specifying the position of label2 when viewed from button2
#Note the difference from the above
label = self.parent.children[0]
#Change in label value and display
label.value = label.value-1
label.text = str(label.value)
Basically, on_press, which represents the behavior when the Button is pressed, is defined to behave as desired, but this time the purpose is to change the value of label2, so it is necessary to call label2 during on_press. Here we need the relative positional relationship within the widget tree. If you look closely at the above program, you can see that it is instructing to call label2 and change the value of value from the positional relationship when viewed from the plus button and minus button (self). (See the figure below)
In this way, the parent widget at the top of the widget tree can be specified by parent, and the child widget at the bottom can be specified by children. Also, since children are in list format, individual child widgets can be specified by numerical values.
I'm ready. Let's summarize what we have done so far and change the value of label2. The whole program and execution result are as follows.
main.py
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
#Increase the number of label2 when you press Button
class plusButton(Button):
def on_press(self):
#Specifying the position of label2 when viewed from button1
label = self.parent.children[0].children[0]
#Change in label value and display
label.value = label.value+1
label.text = str(label.value)
#Increase the number of label2 when you press Button
class minusButton(Button):
def on_press(self):
#Specifying the position of label2 when viewed from button2
#Note the difference from the above
label = self.parent.children[0]
#Change in label value and display
label.value = label.value-1
label.text = str(label.value)
class testApp(App):
def build(self):
#Generate Boxlayout, plusButton, minusButton, Label
layout1 = BoxLayout(orientation='vertical')
button1 = plusButton(text='children1')
layout2 = BoxLayout(orientation='horizontal')
label2 = Label()
button2 = minusButton(text='children2')
#Added button2 and label2 as child widgets of layout2
layout2.add_widget(button2)
layout2.add_widget(label2)
#Added button1 and layout2 as child widgets of layout1
layout1.add_widget(button1)
layout1.add_widget(layout2)
#Display of initial value on Label2
label2.value = 100
label2.text=str(label2.value)
return layout1
testApp().run()
The number on the lower right (label 2) of the initial screen is 100
Each time you press each button, the value at the bottom right (label 2) changes.
This time, by calling other widgets from the relative position of the widget tree, we made the relationship between the widgets and made the GUI function. If you know this, you can make a simple calculator. Next time, I'll talk about events or the KV language. See you next time!
Kazuya Haraguchi (2018) "Practical Python Library Kivy Programming -Multi-tap App Created with Python-" Mikio Kubo, Asakura Shoten 254-12896-3 /) https://kivy.org/#home
Recommended Posts