Question

我尝试根据验证检查（如果确定可以返回true的javascript函数）更改TextField的边框颜色和宽度。如果用户输入了无效的出生日期，我希望将“文本字段”框的边框涂成红色。这是我的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”的任何想法，如何最好地实现这一目标？

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

如何在Qt QML中从'onEditingFinished'更改textfield属性

1 个答案: