QML小程序：输入元素

展示自定义组件（行编辑框）的输入，焦点切换
展示自定义组件（文本编辑框）的输入
展示图如下：

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

//展示自定义组件（行编辑框）的输入，焦点切换
//展示自定义组件（文本编辑框）的输入

//窗口
Window {
    visible: true   //窗口可见
    width: 640  //窗口宽度
    height: 480 //窗口高度
    title: qsTr("Input")    //窗口标题

    //行编辑区域
    Rectangle {
        id: lineEditScope
        width: 200  //行编辑区域宽度
        height: 80  //行编辑区域高度
        color: "gray"   //行编辑区域颜色

        //自定义组件：行编辑框1
        CLineEdit {
            id: input1  //行编辑框1的id
            x: 8; y: 8  //行编辑框1位置
            width: 96   //行编辑框1宽度
            height: 20  //行编辑框1高度
            focus: true //行编辑框1焦点
            text: "Text Input 1"    //行编辑框1默认值
            KeyNavigation.tab: input2   //允许按Tab键切换焦点到input2
        }

        //注意：如果自定义组件中要使得KeyNavigation.tab生效，必须使用FocusScope(焦点区域)

        //自定义组件：行编辑框2
        CLineEdit {
            id: input2  //行编辑框2的id
            x: 8; y: 36  //行编辑框2位置
            width: 96   //行编辑框2宽度
            height: 20  //行编辑框2高度
            focus: true //行编辑框2焦点
            text: "Text Input 2"    //行编辑框2默认值
            KeyNavigation.tab: input1   //允许按Tab键切换焦点到input1
        }
    }

    //文本编辑区域
    Rectangle {
        id:textEditScope    //文本编辑区域id
        x:0; y: lineEditScope.height + 10   //文本编辑区域位置
        width: 138  //文本编辑区域宽度
        height: 118 //文本编辑区域高度
        color: "linen"  //文本编辑区域颜色

        //自定义组件：文本编辑框
        CTextEdit {
            id: input   //文本编辑框id
            x: 8; y:8   //文本编辑框位置
            width: 120  //文本编辑框宽度
            height: 108 //文本编辑框高度
            focus: true //文本编辑框焦点
            text: "Text Edit"   //文本编辑框默认值
        }
    }
}

CLineEdit.qml

import QtQuick 2.0

//自定义组件，行编辑框

//焦点区域元素
FocusScope {
    width: 96   //焦点区域宽度
    height: input.height + 8    //焦点区域高度

    //矩形框
    Rectangle {
        anchors.fill: parent    //锚定填充整个父部件
        color: "lightsteelblue" //矩形框颜色
        border.color: "gray"    //矩形框边框颜色
    }

    property alias text: input.text //别名text，将内部嵌套的元素属性导出到外部使用
    property alias input: input //别名input，将内部嵌套的元素属性导出到外部使用

    //文本输入元素
    TextInput {
        id: input   //文本输入id
        anchors.fill: parent    //文本输入锚定填充到整个父部件
        anchors.margins: 4  //文本输入锚定边框间隔：4
        focus: true //焦点:开
    }
}

CTextEdit.qml

import QtQuick 2.0

//自定义组件，文本编辑框

//焦点区域元素
FocusScope {
    width: 96   //焦点区域宽度
    height: 96  //焦点区域高度

    //矩形框元素
    Rectangle {
        anchors.fill: parent    //锚定填充到整个父部件
        color: "lightsteelblue" //矩形框颜色
        border.color: "gray"    //矩形框边框颜色
    }
    property alias text: input.text //别名，将内部嵌套的元素属性导出到外部使用
    property alias input: input //别名，将内部嵌套的元素属性导出到外部使用

    //文本编辑框
    TextEdit {
        id: input   //文本编辑框id
        anchors.fill: parent    //锚定填充到整个父部件
        anchors.margins: 4  //锚定文本编辑框边距间隔：4
        focus: true //焦点
    }
}