《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常用属性

属性	说明
text	文本内容
text_lauguage	文本语言，例如：zh_CN、en_US、fr和ja
halign	文本的水平对齐方式，可设置为auto(默认)、left、center和right等属性
multiline	是否显示多行文本，默认属性为True
allow_copy	是否允许复制文本，默认属性为True
auto_indent	自动缩进多行文字，默认属性为False
font_size	文本的字体大小，以像素为单位，默认为15sp
foreground_color	前景颜色，格式为rgba，默认属性为[0,0,0,1]
minimum_height	文本框内容的最小高度
password	是否用password_mask替换显示的密码，默认为False
password_mask	在password为True时使用，默认以“*”替换显示的密码
readonly	是否将文本框属性设置为只读，默认为False
background_color	背景颜色，格式为rgba，默认为白色[1,1,1,1]
padding_x	文本的水平填充，格式为[padding_left,padding_right]或[padding_horizontal]，默认为[0,0]
padding_y	文本的垂直填充，格式为[padding_top,padding_bottom]或[padding_vertical]，默认为[0,0]
padding	文本填充，格式为[padding_left,padding_top,padding_right,padding_bottom]或[padding_horizontal,padding_vertical]或[padding]，默认属性为[6,6,6,6]
hint_text	提示文本，默认为空字符串
hint_text_color	hint_text文本的当前颜色，格式为rgba，默认为灰色[0.5,0.5,.5,1]
input_filter	过滤输入，默认为None
paste()	插入剪切板的内容到当前光标位置
write_tab	使用tab键将移至下一个小部件；否则将进入文本框，默认为True
background_active	默认为“kivy\tools\theming\defaulttheme\textinput_active.png”属性
background_disabled_normal	禁用TextInput时的背景图像，默认为“textinput_disabled.png”属性
background_normal	TextInput不在焦点上时的背景图像，默认为“textinput.png”属性
handle_image_left	在待处理的文本框左侧显示的图像，默认为“selector_left.png”属性
handle_image_middle	在待处理的文本框中间显示的图像，默认为'selector_middle.png'属性
handle_image_right	在待处理的文本框右侧显示的图像，默认为"selector_right"属性
replace_crlf	用LF自动替换CRLF
select_all	选中文本框显示的所有文本
selection_color	所选内容的当前颜色，格式为rgba，默认为[0.1843,0.6549,0.8313,.5]
selection_from	选择开始的光标索引，默认为None，为只读属性
selection_to	选择结束的光标索引，默认为None，为只读属性
selection_text	当前选择的内容，默认为空字符串，为只读属性
suggestion_text	当前行的末尾显示建议文本
tab_width	将tab替换为指定数量的空格，默认为4
select_text(start,end)	选中文本框显示的部分文本
base_direction	文本的基本方向，可设置为None(默认)、ltr、rtl、weak_ltr、weak_rtl(r即right，t即to，l即left)
border	边框，默认属性为(4,4,4,4)
cancel_selection	取消当前的选择
use_bubble	是否使用剪切/复制/粘贴气泡，在0移动设备上默认为True；其他默认为False
use_handles	是否显示选择指示，在移动设备上默认为True；其他默认为False
copy(data='')	将提供的值复制到剪切板中
cursor	当前光标位置
cursor_blink	光标是否闪烁，默认为True
cursor_col	光标的当前列，为只读属性
cursor_row	光标的当前行，为只读属性
cursor_color	光标的当前颜色，格式为rgba，默认属性为[1,0,0,1]
cursor_index(cursor=None)	返回文本/值中的光标索引
cursor_offset()	获取当前行上的光标偏移量
cursor_pos	光标的当前位置，以（x,y）为单位 ，只读属性
cursor_width	光标的当前宽度，默认为“1sp”
cut()	将当前选择剪切到前贴板
keyboard_suggestions	在键盘上方是否提供建议输入，默认为True，设置input_type属性后才会生效
line_height	计算一行文本的最小高度，为只读属性
line_spacing	线条之间的空间，默认为0
on_double_tap()	双击文本框触发该事件
on_triple_tap()	三击文本框触发该事件
on_quad_touch()	在文本框内部四指触摸事件
do_redo()	重新执行do_undo/<Ctrl+z>取消的所有命令，快捷键为<Ctrl+R>
do_undo()	进行撤销操作，快捷键为<Ctrl+Z>
reset_undo()	从内存中重置撤销和重做列表
font_context	字体中的上下文
font_family	字体系列，仅在使用font_context选项时适用
scroll_x	窗口的X方向滚动值，默认为0
scroll_y	窗口的Y方向滚动值，默认为0
text_validate_unfocus	停止监听键盘，默认为True
get_cursor_from_xy(x,y)	从(x,y)位置返回光标的（行,列）
get_cursor_from_index(index)	从文本索引返回光标的（行,列)
delete_selection(from_undo=False)	删除当前选择的文本
disabled_foreground_color	禁用时前景的颜色，格式为rgba，默认为[0,0,0,5]
do_backspace(from_undo=False,mode='bkspc')	从当前位置执行删除操作
do_cursor_movement(action,control=False,alt=False)	相对于当前位置移动光标
insert_text(substring,from_undo=False)	在当前光标位置插入新文本
keyboard_on_key_down(window,keycode,text,modifiers)	将焦点实时绑定到键盘，在每次输入时都会调用（类似于press）
keyboard_on_key_up(window,keycode)	将焦点实时绑定到键盘，在每次什邡市都会调用（类似release）

        注意：所有和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：选中，按<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.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复选框