效果如下图 :前2个是TextInput,可以通过tab按键互相切换焦点;第3个是TextEdit,可以输入多行文字。
1. TextInput封装
- LineEditFb.qml
import QtQuick
FocusScope{
width:200
height:30
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
}
}
2. TextEdit封装
- TextEditFb.qml
import QtQuick
FocusScope{
width:200
height:30
Rectangle{
anchors.fill: parent
color:"lightsteelblue"
border.color:"gray"
}
property alias text: input.text
property alias input: input
TextEdit{
id:input
anchors.fill: parent
anchors.margins: 4
focus:true
wrapMode: Text.WordWrap //自动换行
}
}
3. 主窗口调用
- QmlInput.qml
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Input example")
Rectangle{
width:200
height:80
color:'linen'
LineEditFb{
id:input1
input.font.pixelSize: 16
height:input.font.pixelSize+10
//input.color: 'white'
focus: true
text:'欢迎你'
KeyNavigation.tab: input2 //用于tab键切换
}
LineEditFb{
id:input2
input.font.pixelSize: 16
y:input1.y + input1.height + 10
height:input.font.pixelSize+10
//input.color: 'white'
text:'我的朋友'
KeyNavigation.tab: input1 //用于tab键切换
}
TextEditFb{
id:edit
input.font.pixelSize: 16
y:input2.y + input2.height + 10
height:10*input.font.pixelSize+10
//input.color: 'white'
text:'请输入内容:'
}
}
}