QML --》 文本输入TextInput与TextEdit
1、文本输入
文本输入允许用户输入一行文字。
import QtQuick 2.0 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 // 绑定tab键,当按下时会跳转到imput2 } TextInput{ id:input2 x:8;y:36; width: 96; height: 20; text:"Text Input 2"; KeyNavigation.tab: input1 } }
2、当我们把TextInput当成组件时:
// Tline.qml
Rectangle{ width: 96; height: input.height + 8; Rectangle{ anchors.fill:parent; color: "lightsteelblue"; border.color: "gray"; } property alias text: input.text; property alias input: input TextInput{ id:input; height: 20; anchors.fill: parent; anchors.margins: 4; focus: true; } }
然后我们开始复用,再重写KeyNavigation时,就会发现我们无法把焦点切换到input2上。所以为了防止上述问题,我们需要引入焦点局域(FocusScope)
FocusScope{ width: 96; height: input.height + 8; Rectangle{ anchors.fill:parent; color: "lightsteelblue"; border.color: "gray"; } property alias text: input.text; property alias input: input TextInput{ id:input; height: 20; anchors.fill: parent; anchors.margins: 4; focus: true; } }
然后我们重写KeyNavigation时,就会发现我们可以把焦点切换到input2上。
TextEdit与textinput相似
FocusScope{ width: 96; height: 96; Rectangle{ anchors.fill:parent; color: "lightsteelblue"; border.color: "gray"; } property alias text: input.text; property alias input: input TextInput{ id:input; anchors.fill: parent; anchors.margins: 4; focus: true; } }