Sea-Whales 树深时见鹿，海蓝时见鲸。

部分UX部件

前面我们已经对Layout布局，以及Canvas 画布进行了学习，我们接下来来看看，经常使用的一些部件，这些部件是图形界面设计的重要组成部分，合理使用可以更高效的开发程序。我们先从简单部件开始。

Button

button常用属性

触发事件

• on_press：按下按钮触发该事件
• on_release: 按下按钮并释放时，触发该事件

Label标签

Kivy中的Label小部件用于显示文本，目前只支持ASCII和Unicode编码字符（暂不支持中文），可以通过属性设置文本内容，字体，大小，颜色，对齐方式，换行以及标记文字等内容。

常用属性

开启以下需要将markup打开

#:import C kivy.utils.get_color_from_hex

<LabelBoxLayout>:
    orientation: 'vertical'
    Button:
        text: 'Button'
        on_press: root.on_press_btn()
        on_release: root.on_release_btn()

    Label:
        id: lable_btn
        text: 'The first step is one of awareness. It will be hard to make a change to positive thinking without being acutely intimate with the thoughts that run through your mind. Recently, I was amazed to discover deep buried emotions from negative thoughts that I had for fewer than 10 minutes. Without awareness, I would have carried the hurt and anger inside. Awareness helped me to bring them out to the open for me to deal with.'
        font_size: '20sp'
        color: C('#B0C4DE')
        italic: True
        text_size: cm(15), mm(200)
        halign: 'right'
        valign: 'middle'
        strikethrough: True
    Label:
        canvas.before:
            Color:
                rgba: C('#DCDCDC')
            Rectangle:
                pos: self.pos
                size: self.size
        text: 'There are moments in life when [i]you miss someone [color=#"4169E1"]so much that you just want[/color] to pick them from your[/i] dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.'
        color: C('#FF0000')
        font_size: '15sp'
        bold: True
        text_size: cm(10), mm(100)
        halign: 'center'
        valign: 'middle'
        underline: True
        line_height: 1.0
        markup: True

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout


class LabelBoxLayout(BoxLayout):
    def __init__(self, **kwargs):
        super(LabelBoxLayout, self).__init__(**kwargs)

    def on_press_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough

    def on_release_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough


class LabelBoxApp(App):
    def build(self):
        return LabelBoxLayout()


if __name__ == '__main__':
    LabelBoxApp().run()

触发事件

Kivy中是使用ref 来标记触发事件的，点击ref包裹的文本，就可以触发“on_ref_press”事件。

设置Label 标签的触发事件

在使用ref之前，需要将markup设置为True

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.utils import get_color_from_hex


class LabelBoxLayout(BoxLayout):
    def __init__(self, **kwargs):
        super(LabelBoxLayout, self).__init__(**kwargs)
        strtext = 'Awareness [color=#00FF00][ref=label][i]helped me[/i][/ref][/color] to [b]bring[/b] [s]them out[/s] to the open for me to deal with.'
        label_ref = Label(font_size='25sp',text=strtext, markup=True,
                          color=get_color_from_hex('#F0F8FF'))
        label_ref.bind(on_ref_press=self.on_press_btn_label_ref)
        self.add_widget(label_ref)

    def on_press_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough

    def on_release_btn(self):
        self.children[1].strikethrough = not self.children[1].strikethrough

    def on_press_btn_label_ref(self, *args):
        self.children[0].strikethrough = not self.children[0].strikethrough


class LabelBoxApp(App):
    def build(self):
        return LabelBoxLayout()


if __name__ == '__main__':
    LabelBoxApp().run()

#:import C kivy.utils.get_color_from_hex

<LabelBoxLayout>:
    orientation: 'vertical'
    Button:
        text: 'Button'
        on_press: root.on_press_btn()
        on_release: root.on_release_btn()

    Label:
        id: lable_btn
        text: 'The [ref=lable]first step[/ref] is one of awareness. It will be hard to make a change to positive thinking without being acutely intimate with the thoughts that run through your mind. Recently, I was amazed to discover deep buried emotions from negative thoughts that I had for fewer than 10 minutes. Without awareness, I would have carried the hurt and anger inside. Awareness helped me to bring them out to the open for me to deal with.'
        font_size: '20sp'
        color: C('#B0C4DE')
        italic: True
        text_size: cm(15), mm(200)
        halign: 'right'
        valign: 'middle'
        on_ref_press:
            print('Click on_ref_press')
            root.on_release_btn()
        strikethrough: True
        markup: True
    Label:
        canvas.before:
            Color:
                rgba: C('#DCDCDC')
            Rectangle:
                pos: self.pos
                size: self.size
        text: 'There are moments in life when [i]you miss someone [color=#"4169E1"]so much that you just want[/color] to pick them from your[/i] dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.'
        color: C('#FF0000')
        font_size: '15sp'
        bold: True
        text_size: cm(10), mm(100)
        halign: 'center'
        valign: 'middle'
        underline: True
        line_height: 1.0
        markup: True

单位介绍

px、dp和sp，这三个单位的区别在于，它们的定义各不相同：

• px：指像素，是指基本原色素及其灰度的基本编码,是Pixel的缩写。像素是指基本原色素及其灰度的基本编码，由 Picture（图像）和 Element（元素）这两个单词的字母所组成的。当图片尺寸以像素为单位时，需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相转换。
  例如：大多数网页制作常用图片分辨率为72，即每英寸像素为72，1英寸等于2.54厘米。
• dp：安卓开发时的长度单位,Density-independent pixel，是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度。。
• sp：与缩放无关的抽象像素，是字体单位.scale-independent pixel，安卓开发用的字体大小单位。一般情况下可认为sp=dp。

Image图片

使用Image控件来显示图片，可以通过size和pos来设置属性和设置大小和位置，通过source属性来指定图片的相对路径，此外，如果图片大小过大的时候，为了防止卡顿，可以使用异步的方式加载，这我们前面在学习的时候，咱们有试过，使用异步加载图片。

我们先来看看Image有哪些属性。

属性

# !/usr/bin/env python3
# -*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout


class ImageBoxLayout(BoxLayout):
    def __init__(self, **kwargs):
        super(ImageBoxLayout, self).__init__(**kwargs)


class ImageBoxApp(App):
    def build(self):
        return ImageBoxLayout()


if __name__ == '__main__':
    ImageBoxApp().run()

<ImageBoxLayout>:
    canvas:
        Color:
            rgba:[1,1,1,1]
        Rectangle:
            size:self.width+20, self.height+20
            pos: self.x-10,self.y-10
            source:'UxParts.jpg'

    AsyncImage:
        source:'https://blogcdn.sea-whales.cn/blog/typecho/17.jpg'
        size_hint_y: None
        width: 300
        allow_stretch: True   # 自适应
    
    Image:
        source:'https://blogcdn.sea-whales.cn/blog/typecho/17.jpg'
        size_hint_y: None
        width: 300
        allow_stretch: True