章节知识点总揽

4.2 Label标签

        在Kivy中，Label小部件用于呈现文本，它仅支持ASCII和Unicode编码的字符串（不支持中文），在Label中，可以设置文本内容、字体、大小、颜色、对齐方式、换行、引用以及标记文字等内容。

4.2.1 使用方法

        在.py文件里，使用标签需要引入Label类，通过Label类生成一个标签，再通过add_widget()方法添加到布局中即可，具体方法如下：

from kivy.uix.label import Label
la = Label(text='Hello world')
self.add_widget(la)

        新建main.py文件，使用floatlayout布局，内容如下：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.label import Labelclass FloatLayoutWidget(FloatLayout):def __init__(self,**kwargs):super().__init__(**kwargs)la = Label(text='Hello world')self.add_widget(la)class LabelApp(App):def build(self):return FloatLayoutWidget()if __name__ == '__main__':LabelApp().run()

        相比之下，在.kv文件里使用标签就非常简单，无需引用即可食用，具体代吗如下：

Label:text:'Hello world'

        修改main.py文件，去掉布局内容，具体如下：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.label import Labelclass FloatLayoutWidget(FloatLayout):def __init__(self,**kwargs):super().__init__(**kwargs)class LabelApp(App):def build(self):return FloatLayoutWidget()if __name__ == '__main__':LabelApp().run()

        根据main.py中LabelApp()方法命名，新建label.kv文件，内容如下：

Label:text:'Hello world'

        运行main.py文件，如下图所示：

 4.2.2 常用属性

        Kivy为Label标签提供了一些常用的属性，关于Label标签的常用属性及说明如下表所示：

        实例：设置Label标签的常用属性

        在main.py文件内，我们使用的是BoxLayout布局，具体代码如下：

from kivy.app import App
from kivy.uix.boxlayout import BoxLayoutclass LabelBoxLayout(BoxLayout):def __init__(self,**kwargs):super().__init__(**kwargs)class LabelApp(App):def build(self):return LabelBoxLayout()if __name__ == "__main__":LabelApp().run()

        想要设置Label标签的属性，则需要在label.kv文件内，根据需求设置为其相关属性，代码如下：

:orientation:'vertical'Label:text:'can only display glyphs that is available in the font'font_size:'20sp'color:.9,.2,.1,1italic:Truetext_size:cm(6),mm(20)halign:'right'valign:'middle'strikethrough:TrueLabel:canvas:Color:rgba:(.1,.1,.1,.1)Rectangle:pos:self.possize:self.sizetext:'can only display glyphs that is availabel in the font'color:.2,.2,.9,1bold:Truetext_size:cm(4),cm(2)halign:'left'valign:'top'underline:Trueline_height:2.0

        运行结果如下图所示：

4.2.3 标记文本

        在Label中的文本标记非常重要，它可以使样式更加灵活，还可以触发绑定的事件。值得注意的是，在使用时一定要先将markup属性设置为True。在Label标记中可用的属性也非常多，关于Label文本标记的常用属性及说明如下表：

        实例：设置Label标签的标记文本

        main.py文件延用上文的内容，在实例中，main.py文件（与”实例：设置Label标签的常用属性”相比）没有发生改变，依然是让其加载.kv文件。

        在box.kv文件中，应用“实例：设置Button按钮并触发事件”部分属性（color、size等），具体代码如下：

:orientation:'vertical'Label:text:'can only display glyphs that is available in the font'font_size:'20sp'color:.9,.2,.1,1markup:1Label:canvas:Color:rgba:(.1,.1,.1,.1)Rectangle:pos:self.possize:self.sizetext:'can only display glyphs that is availabel in the font'color:.2,.2,.9,1markup:True

        执行main.py后，如下图所示：

4.3.4 触发事件

        在通过ref标记（可在前面常用属性表中查询）一段文本后，点击这段文本就可以触发“on_ref_press”事件，在该事件中调用相关的回调函数去处理业务逻辑即可。

实例：设置Label标签的触发事件

        在main.py文件中，引入Label来生成一个标签，在用ref标记前，一定先将markup属性设置为True(“1”也可以表示True)，随后在触发事件中绑定，回调函数即可。具体代码如下：

        main,py内容：

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Labelclass LabelBoxLayout(BoxLayout):def __init__(self,**kwargs):super().__init__(**kwargs)#设置引用时,markup属性必须设置为真（True或1等）#将“Label”文本标记，单击“Label”文本时会触发绑定的事件，单击“Hello”文本则不会label_ref = Label(text='Hello[ref=label]Label[/ref]',markup=True,color=(.9,.2,.1,1))#绑定触发事件，回调方法label_ref.bind(on_ref_press=self.print_it)self.add_widget(label_ref)#未使用到self，建议设置为静态方法@staticmethoddef print_it(*args):print('print_it is running')class LabelApp(App):def build(self):return LabelBoxLayout()if __name__ == "__main__":from kivy.core.window import WindowWindow.clearcolor=[1,1,1,1]LabelApp().run()

        运行main.py文件，结果如下图：

        在label.kv文件中，添加一个标签并直接设置“on_ref_press”，这里基本同.py文件内的用法一致，具体代码如下：

:orientation:'vertical'Label:canvas:Color:rgba:(.1,.1,.1,.1)Rectangle:pos:self.possize:self.sizetext:'[ref="click"]can only display[/ref]glyphs that is availabel in the font'color:.2,.2,.9,1markup:Trueon_ref_press:print('ref named click is running')root.print_it()

        使用上文main.py文件，运行结果如下图：

上一篇：简单UX部件——Button按钮

下一篇：简单UX部件——Image图片