如何在 Qt QML 中从 'onEditingFinished' 更改文本字段 属性

Question

我正在尝试根据验证检查更改我的 TextField 的边框颜色和宽度（javascript 函数 returns 如果正常则为真）。如果用户输入的出生日期无效，我希望将文本框边框设为红色。这是我的 qml 定义：

        TextField{
            id: dob
            placeholderText: qsTr("dd-mm-yyyy")
            font.pixelSize: 14
            Layout.fillWidth: true
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    id:dobstyle
                    radius: 2
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "black"
                    border.width: 1
                }
            }
            inputMethodHints: Qt.ImhDate
            onActiveFocusChanged: {
                inputMask= "00-00-0000"
            }
            onEditingFinished: {
                var datesplit = dob.text.split("-");
                var jsDOB = new Date(datesplit[2],datesplit[1]-1,datesplit[0]);
                var logichk = (isValidDateLogical(jsDOB));
                var validchk = (isValidDate(dob.text))
                if(!validchk || !logichk)
                {
                    dobstyle.border.color="red"
                    dobstyle.border.width=3
                }
            }
            selectByMouse: true
        }

我正在 'ReferenceError: dobstyle is not defined' 知道如何最好地实现这一目标吗？

Answer 1

TextFieldStyle是一个组件，里面的东西对外不存在，你要做的就是在TextField中创建一个属性并绑定，然后才修改 属性:

...
Layout.fillWidth: true
property color bordercolor: "black" // <---
property int borderwidth: 1 // <---
style: TextFieldStyle {
    textColor: "black"
    background: Rectangle {
        id:dobstyle
        radius: 2
        implicitWidth: 100
        implicitHeight: 24
        border.color: dob.bordercolor // <---
        border.width: dob.borderwidth // <---
    }
}
...
onEditingFinished: {
    var datesplit = dob.text.split("-");
    var jsDOB = new Date(datesplit[2],datesplit[1]-1,datesplit[0]);
    var logichk = isValidDateLogical(jsDOB));
    var validchk = (isValidDate(dob.text))
    if(!validchk || !logichk)
    {
        dob.bordercolor ="red" // <---
        dob.borderwidth = 3 // <---
    }
}