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;
    }
}