Qml之编辑框控件

Qml中基本的文本输入组件包括：TextInput、TextField、TextEdit、TextArea。

具体的区别参见：

https://blog.csdn.net/gongjianbo1992/article/details/101156110

https://blog.csdn.net/kanchuan1905/article/details/53839930

 

实现一个普通的编辑框控件

 

 

方式一：使用TextInput

1、TextInput仅是一个普通的文本输入，没有上图的默认字体，没有上图的矩形框。

2、因此，需要额外额外添加一个矩形框。注意：这个矩形框的位置，文本输入的限制等

3、默认字体。TextInput不会提供出默认的占位符。

一套组合拳公式：编辑框=Rectangle+TextInput+Text

注意点：

1）如果需要配置占位文本，Text的visible一定要设置；否则叠加输入而不是编辑框。如(visible: (equipNameData.text === "" && !equipNameData.focus) ? true : false)

2）TextInput一定要设置clicp:true，否则输入的文本会可能会超出Rectangle。设置clip:true后当元素的子项超出父项范围后会自动裁剪。

Rectangle{
    width: 250
    height: 32
    x:50
    y:10
    border.width: 1
    border.color: Qt.rgba(0,0,0,0.15)
 
    TextInput{
        id:equipNameData
        width: parent.width
        clip:true
        autoScroll:true
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 16
        font.family: "Microsoft YaHei"
        //validator: RegExpValidator { regExp: /[0-9A-Za-z]+/ }
        wrapMode: TextInput.NoWrap
        onTextChanged: {
            console.log(equipNameData.text)
        }
 
        Text {
            anchors.left: parent.left
            anchors.leftMargin: 2
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("如：XX产业园XX楼XX区XX设备")
            color: "#999999"
            font.family: "Microsoft YaHei"
            font.pixelSize: 14
            visible: (equipNameData.text === "" && !equipNameData.focus) ? true : false
        }
    }
}

 

 

方式二：使用TextField

1、TextField将会默认配置好矩形框、默认文本、输入文本。

注意：

1） TextField默认有背景色。即TextField选中时，矩形框的边框会变色，凸显出选中的效果。可以通过配置background: Rectangle修改，如：

TextField{
    id:equipNameData1
    x:350
    y:10
    placeholderText:qsTr("如：XX产业园XX楼XX区XX设备")
    font.family: "Microsoft YaHei"
    font.pixelSize: 14
    width:250
    height:32
    background: Rectangle {
        border.color: "#26000000"
    }
    onTextChanged: {
           console.log(equipNameData1.text)
    }
}