《Python+Kivy(App开发)从入门到实践》自学笔记：简单UX部件——TextInput输入框

部件——TextInput输入框"/>

《Python+Kivy(App开发)从入门到实践》自学笔记：简单UX部件——TextInput输入框

章节知识点总揽

4.4 TextInput输入框

        Kivy中的TextInput控件提供了可以编辑的纯文本框，支持Unicode编码、多行、光标导航、选择和剪切板等多种功能。

4.4.1 使用方法

        在.py内使用： 需要导入TextInput类，通过TextInput类生成一个文本框，并设置相关样式，再通过add_widget()方法添加到布局中即可，关键代码如下： 

from kivy.uix.textinput import TextInput        #引入控件
ti = TextInput(text='copy')                 #指定属性
self.add_widget(ti)                             #添加到布局

新建main.py文件，内容如下：

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInputclass FloatLayoutWidget(FloatLayout):def __init__(self,**kwargs):super().__init__(**kwargs)ti = TextInput(text='copy')self.add_widget(ti)class TextInputApp(App):def build(self):return FloatLayoutWidget()if __name__ == '__main__':TextInputApp().run()

        相比之下，在.kv文件中实现就非常简单，无需引入即可使用。关键代码如下： 

TextInput:                    #添加一个文本框text:'cocpy'          #显示的文本

4.4.2 常用属性

        在Kivy中，为了方便设置TextInput输入值的样式，Kivy提供了大量的属性，关于TextInput的常用属性及说明如下表所示：

TextInput常用属性

        注意：所有和tab相关的属性，运行失败，尝试改为tap，不确定哪个是对的。下文代码中个别使用tap是正确的，但没有测试全部属性。

实例：设置TextInput输入框的常用属性

        新建一个用widget布局的main.py文件，用来加载.kv文件，具体代码如下：

from kivy.app import App
from kivy.uix.widget import Widgetclass TextInputWidget(Widget):def  __init__(self,**kwargs):super().__init__(**kwargs)class TextInputApp(App):def build(self):return TextInputWidget()if __name__ == '__main__':TextInputApp().run()

        根据main.py中TextInputApp()类，新建textinput.kv文件，首先设置布局为白色背景，再设置上表中的部分属性（文件中设置了不可复制、背景颜色、只读、居中等属性），具体内容如下： 

<TextInputWidget>:canvas:Color:rgba:[1,1,1,1]Rectangle:pos:self.possize:self.sizeTextInput:text:'c0c,ink'multiline:Falsepos:400,380allow_copy:FalseTextInput:text:'cocpy'pos:100,180halign:'center'background_color:100,2,2,1TextInput:text:'first'pos:400,180readonly:True

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

 4.4.3 触发事件

        在使用TextInput输入框时，通常情况下需要使用以下几个触发事件：

                on_text_validate：选中，按<Enter>键的时候触发该事件

                on_text：文本改变的时候触发该事件

                on_double_tap：双击触发该事件

                on_trible_tap：三击触发该事件

                on_quad_touch：四指触摸时触发该事件

        实例：设置TextInput输入框的触发事件

        在上面实例的基础上，设置几个触发事件，具体代码如下：

        注意：这里为了观察，所以直接更改了位置，当然也可以在.py里添加相关方法，并在.kv文件内通过root.方法调用

        main.py文件不变

        textinput.kv文件内容如下： 

<TextInputWidget>:canvas:Color:rgba:[1,1,1,1]Rectangle:pos:self.possize:self.sizeTextInput:text:'c0c,ink'multiline:Falsepos:400,380allow_copy:Falseon_text_validate:self.pos=[self.x,self.y-5]TextInput:text:'cocpy'pos:100,180halign:'center'background_color:100,2,2,1on_text:self.pos=[self.x+5,self.y]TextInput:text:'first'pos:400,180readonly:Trueon_double_tap:self.pos=[self.x-5,self.y]on_triple_tap:self.pos=[self.x,self.y+5]on_quad_touch:self.pos=[400,180]

        运行mian.py结果如下图：

        讲一个实用的属性：scroll_y属性，可以实现文本行数过多后，自由向上滚动翻阅，同理，scroll_x属性可以实现左右自动滚动翻阅功能。

        其属性是一个整数，也可以时布尔值。在.py文件中用scroll_y=True或scroll_y=5，在.kv文件中则将'='用':'代替：scroll:True或scroll:5

测试例子：

from kivy.app import App
from kivy.uix.textinput import TextInputclass MyApp(App):def build(self):textinput = TextInput(text="This is a multiline\nTextInput widget.",multiline=True,scroll_y=5)return textinputif __name__ == '__main__':MyApp().run()

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

下一篇：简单UX部件——CheckBox复选框