qml: 自定义输入框

Posted 2020-12-27 yinwei-space

import QtQuick 2.7

Rectangle {
    width: 20;
    height:  20;
    border.width: 1;
    border.color: "#E7E7E7"
    radius:  2;
    clip:true;
    property alias initTxt: txtinput.text;
    TextInput{
        id: txtinput;
        autoScroll: true;
        anchors.fill: parent;
        leftPadding: 4;
        rightPadding:4;
        clip:true;
        verticalAlignment: Text.AlignVCenter;
        selectByMouse:true;
        onEditingFinished:{
            txtinput.visible = false;
            txtLabel.visible = true;
            txtLabel.text = txtinput.text;
        }
    }
    Text {
        id: txtLabel
        anchors.fill: parent;
        leftPadding: 2;
        rightPadding: 2;
        clip:true;
        verticalAlignment: Text.AlignVCenter;
        MouseArea{
            anchors.fill: parent;
            onClicked:{
                txtLabel.visible = false;
                txtinput.visible = true;
                txtinput.text = txtLabel.text;
            }
        }
    }
}

效果：