TextInput
是单行的文本输入框,支持验证器、输入掩码和显示模式等。
注意,我们这里放置了两个TextInput
,用户可以通过点击输入框改变焦点。如果我们想支持键盘导航,可以添加KeyNavigation
附加属性。
- Rectangle {
- width: 200
- height: 80
- color: "linen"
- TextInput {
- id: input1
- x: 8; y: 8
- width: 96; height: 20
- focus: true
- text: "Text Input 1"
- KeyNavigation.tab: input2
- }
- TextInput {
- id: input2
- x: 8; y: 36
- width: 96; height: 20
- text: "Text Input 2"
- KeyNavigation.tab: input1
- }
- }
KeyNavigation
是一个附加属性。当用户点击了指定的按键时,属性指定的组件就会获得焦点。附加属性类似于普通属性,但是又有所区别。普通的属性隶属于这个类型;附加属性一般用于修饰或补充目标类型。比如这里的KeyNavigation.tab
并不是TextInput
的普通属性,仅仅是用来说明TextInput
的一种特征。附加属性的一般语法是类型.属性名
,以此为例,类型就是KeyNavigation
,属性名就是。
为了让外界可以直接设置TextInput
的text
属性,我们给这个属性声明了一个别名。同时,为了让外界可以访问到内部的textInput
,我们将这个子组件也暴露出来。不过,从封装的角度而言,将实现细节暴露出去并不是一个好的设计,这要看暴露出来这个子组件的影响究竟有多大。然而这些都是关于设计的问题,需要具体问题具体分析,这里不再赘述。
下面我们可以将前面的例子修改成我们新创建的LineEdit
组件:
- Rectangle {
- width: 200
- height: 80
- color: "linen"
- LineEdit {
- id: input1
- x: 8; y: 8
- width: 96; height: 20
- focus: true
- text: "Text Input 1"
- KeyNavigation.tab: input2
- }
- LineEdit {
- id: input2
- x: 8; y: 36
- width: 96; height: 20
- text: "Text Input 2"
- KeyNavigation.tab: input1
- }
- }
只要将 LineEdit.qml 与 main.qml 放在同一目录下,我们就不需要额外的操作,即可在 main.qml 中直接使用LineEdit
。运行结果如下:
当FocusScope
接收到焦点时,会将焦点转发给最后一个设置了focus:true
的子对象。所以,我们可以使用FocusScope
重写LineEdit
组件:
这样修改过之后,我们就可以像之前的TextInput
一样正常使用了。
TextEdit
与TextInput
非常类似,唯一区别是TextEdit
是多行的文本编辑组件。与TextInput
类似,TextEdit
也没有一个可视化的显示,所以我们也需要自己绘制其显示区域。这些内容与前面代码几乎一样,这里不再赘述。
附加属性类似于键盘事件,允许我们相应特定的按键按下事件。例如,我们可以利用方向键控制举行的位置,如下代码所示:
- DarkSquare {
- width: 400; height: 200
- GreenSquare {
- id: square
- x: 8; y: 8
- }
- focus: true
- Keys.onLeftPressed: square.x -= 8
- Keys.onRightPressed: square.x += 8
- Keys.onUpPressed: square.y -= 8
- Keys.onDownPressed: square.y += 8
- Keys.onPressed: {
- switch(event.key) {
- case Qt.Key_Plus:
- square.scale += 0.2
- break;
- case Qt.Key_Minus:
- square.scale -= 0.2
- break;
- }
- }