Ich möchte ein einfaches TextArea-Element in QML erstellen und versuche diesen Code. Wenn Sie jedoch in Textarea schreiben, ist der Text nicht mehr an der Grenze.

Haben Sie einfache TextArea oder können Sie mir helfen, diesen Code zu verbessern:

FocusScope {
    id: focusScope
    width: 400; height: 50
property int fontSize: focusScope.height -30
property color textColor: "black"
property string placeHolder: "Type something..."
property string inputExpression: ".*"
property bool isUserInTheMiddleOfEntringText: false

Rectangle {
    width: parent.width
    height: parent.height
    border.color: 'steelblue'
    color: focus?'red':'#AAAAAA'
    border.width: 3
    radius: 0
    MouseArea {
        anchors.fill: parent
        onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
        }
    }
}

Text {
    id: typeSomething
    anchors.fill: parent; anchors.rightMargin: 8
    verticalAlignment: Text.AlignVCenter
    text: placeHolder
    color: "gray"
    font.italic: true
    font.pointSize: fontSize
    MouseArea {
        anchors.fill: parent
        onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
        }
    }

}

MouseArea {
    anchors.fill: parent
    onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
    }
}

TextEdit {
    id: textInput
    anchors { right: parent.right; rightMargin: 8; left: clear.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
    focus: true
    selectByMouse: true
    font.pointSize: fontSize
    wrapMode: TextEdit.WordWrap
    color: textColor

}


Text {
    id: clear
    text: "\u2717" // 'x'//"\u2713"
    color: 'steelblue'
    font.pointSize: 25
    opacity: 0
    anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
    MouseArea {
        anchors.fill: parent
        onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }
    }
}
states: State {
        name: "hasText"; when: textInput.text != ''
        PropertyChanges { target: typeSomething; opacity: 0 }
        PropertyChanges { target: clear; opacity: 1 }
    }
transitions: [
    Transition {
        from: ""; to: "hasText"
        NumberAnimation { exclude: typeSomething; properties: "opacity" }
    },
    Transition {
        from: "hasText"; to: ""
        NumberAnimation { properties: "opacity" }
    }
]
}

danke für die Hilfe