【QML学习】文本框输入

效果如下图 ：前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:'请输入内容:'
        }
    }
}