Kivy tutorial 008: More kv language

本文主要是介绍Kivy tutorial 008: More kv language，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Kivy tutorial 008: More kv language – Kivy Blog

Central themes: Event binding and canvas instructions in kv language
中心主题: 事件绑定和 kv语言里的画布结构

This tutorial directly follows on from the previous, so start by retrieving the previous code, as below:
这节导师课直接地跟随上节的，因此从上次的代码找了些代码开始。

main.py:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Sliderfrom kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.slider import Sliderfrom kivy.uix.widget import Widget
from kivy.graphics import Rectangle, Color, Linefrom random import randomclass DrawingWidget(Widget):def __init__(self):super(DrawingWidget, self).__init__()with self.canvas:Color(1, 1, 1, 1)self.rect = Rectangle(size=self.size,pos=self.pos)self.bind(pos=self.update_rectangle,size=self.update_rectangle)def update_rectangle(self, instance, value):self.rect.pos = self.posself.rect.size = self.sizedef on_touch_down(self, touch):super(DrawingWidget, self).on_touch_down(touch)if not self.collide_point(*touch.pos):returnwith self.canvas:Color(random(), random(), random())self.line = Line(points=[touch.pos[0], touch.pos[1]], width=2)def on_touch_move(self, touch):if not self.collide_point(*touch.pos):returnself.line.points = self.line.points + [touch.pos[0], touch.pos[1]]class Interface(BoxLayout):passclass DrawingApp(App):def build(self):root_widget = Interface()return root_widgetDrawingApp().run()

drawing.kv:

<Interface>:orientation: 'vertical'DrawingWidget:Slider:min: 0max: 1value: 0.5size_hint_y: Noneheight: 80Slider:min: 0max: 1value: 0.5size_hint_y: Noneheight: 80Slider:min: 0max: 1value: 0.5size_hint_y: Noneheight: 80BoxLayout:orientation: 'horizontal'size_hint_y: Noneheight: 80Label:text: 'output colour:'Widget:

The first thing to do is draw the coloured Rectangle that the final Widget uses to display an output colour, and for this we need to know how to draw canvas instructions in kv language. The syntax is as below:
第一件事使画多彩的矩形，这矩形是最后的组件用来

Widget:canvas:Color:rgb: 0, 1, 0  # using a fixed colour for nowRectangle:size: self.sizepos: self.pos

Run the code, and you’ll see another of kv language’s most important features; automatic event binding. In the original Python code of tutorial 7 we needed an extra .bind(...) call to make the be updated to always be placed within its Widget. In kv language this is not necessary, the dependency on self.size and self.pos is automatically detected, and a binding automatically created!

This is also the generic syntax for canvas instructions; first add canvas: (or canvas.before or canvas.after), then, indent by 4 spaces, and add canvas instructions much like you would Widgets. However, note that canvas instructions are not widgets.

The only thing now missing from the original Python interface implementation in tutorial 7 is having the Sliders automatically update the output colour rectangle. Change the <Interface>: rule to the following:

<Interface>:orientation: 'vertical'DrawingWidget:Slider:id: red_slidermin: 0max: 1value: 0.5size_hint_y: Noneheight: 80Slider:id: green_slidermin: 0max: 1value: 0.5size_hint_y: Noneheight: 80Slider:id: blue_slidermin: 0max: 1value: 0.5size_hint_y: Noneheight: 80BoxLayout:orientation: 'horizontal'size_hint_y: Noneheight: 80Label:text: 'output colour:'Widget:canvas:Color:rgb: red_slider.value, green_slider.value, blue_slider.valueRectangle:size: self.sizepos: self.pos

There are actually only two changes here; we gave each Slider an id declaration, and in the canvas Color referred to the sliders with this name. Giving a widget an id is just like naming it in Python so that you can refer to it elsewhere.

Thanks to kv’s automatic binding, this is all we need to do to have the Color update automatically whenever a slider value changes. Run the code, and you should see that things work exactly as they did in the original Python interface.

We can finish this tutorial with a couple of extra kv conveniences. First, just as we added an automatically updating Rectangle in the Widget kv, we can do the same for the background of the DrawingWidget. Delete the __init__ and update_rectangle methods in the Python DrawingWidget code, and add a new rule in the kv file:

<DrawingWidget>:canvas:Color:rgba: 1, 1, 1, 1Rectangle:pos: self.possize: self.size

Second, you might have noticed that there’s a lot of code duplication in each of the Slider rules - we set the same min, max, initial value`, ``size_hint_y` and height for every one. As is normal in Python, it would be natural to abstract this in a new class, so as to set each value only once. You can probably already see how to do this with what we’ve learned so far (make a new class YourSlider(Slider): in the Python and add a new <YourSlider>: rule in the kv), but I’ll note that you can even do this entirely in kv:

<ColourSlider@Slider>:min: 0max: 1value: 0.5size_hint_y: Noneheight: 80<Interface>:orientation: 'vertical'DrawingWidget:ColourSlider:id: red_sliderColourSlider:id: green_sliderColourSlider:id: blue_sliderBoxLayout:orientation: 'horizontal'size_hint_y: Noneheight: 80Label:text: 'output colour:'Widget:canvas:Color:rgb: red_slider.value, green_slider.value, blue_slider.valueRectangle:size: self.sizepos: self.pos

The new <ColourSlider@Slider>: rule defines a dynamic class, a Python class kv rule without a corresponding Python code definition. This is convenient if you want to do something repeatedly only in kv, and never access it from Python.

At this point, we’ve reached feature parity with the original Python code, and seen all the basics of kv language. In the next tutorial we’ll finish off the original purpose of all these sliders; letting the user set the colour of line that is drawn by the DrawingWidget.

Full code

main.py:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Sliderfrom kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.slider import Sliderfrom kivy.uix.widget import Widget
from kivy.graphics import Rectangle, Color, Linefrom random import randomclass DrawingWidget(Widget):def on_touch_down(self, touch):super(DrawingWidget, self).on_touch_down(touch)if not self.collide_point(*touch.pos):returnwith self.canvas:Color(random(), random(), random())self.line = Line(points=[touch.pos[0], touch.pos[1]], width=2)def on_touch_move(self, touch):if not self.collide_point(*touch.pos):returnself.line.points = self.line.points + [touch.pos[0], touch.pos[1]]class Interface(BoxLayout):passclass DrawingApp(App):def build(self):root_widget = Interface()return root_widgetDrawingApp().run()

drawing.kv:

<DrawingWidget>:canvas:Color:rgba: 1, 1, 1, 1Rectangle:pos: self.possize: self.size<ColourSlider@Slider>:min: 0max: 1value: 0.5size_hint_y: Noneheight: 80<Interface>:orientation: 'vertical'DrawingWidget:ColourSlider:id: red_sliderColourSlider:id: green_sliderColourSlider:id: blue_sliderBoxLayout:orientation: 'horizontal'size_hint_y: Noneheight: 80Label:text: 'output colour:'Widget:canvas:Color:rgb: red_slider.value, green_slider.value, blue_slider.valueRectangle:size: self.sizepos: self.pos