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