《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.com')                 #指定属性
self.add_widget(ti)                             #添加到布局

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

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

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

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

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 Widget
class 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.pos
			size:self.size
	TextInput:
		text:'c0c,ink'
		multiline:False
		pos:400,380
		allow_copy:False
 
	TextInput:
		text:'cocpy.com'
		pos:100,180
		halign:'center'
		background_color:100,2,2,1
 
	TextInput:
		text:'first'
		pos:400,180
		readonly:True

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

 4.4.3 触发事件

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

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

                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.pos
			size:self.size
	TextInput:
		text:'c0c,ink'
		multiline:False
		pos:400,380
		allow_copy:False
		on_text_validate:self.pos=[self.x,self.y-5]
 
	TextInput:
		text:'cocpy.com'
		pos:100,180
		halign:'center'
		background_color:100,2,2,1
		on_text:self.pos=[self.x+5,self.y]
 
	TextInput:
		text:'first'
		pos:400,180
		readonly:True
		on_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 TextInput
 
class MyApp(App):
    def build(self):
        textinput = TextInput(text="This is a multiline\nTextInput widget.",
                                multiline=True,
                                scroll_y=5)
        return textinput
 
if __name__ == '__main__':
    MyApp().run()

 

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

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