030-第三代软件开发-密码输入框-CFANZ编程社区

第三代软件开发-密码输入框

文章目录

第三代软件开发-密码输入框

关键字： Qt、 Qml、 echoMode、 TextInput、 Image

项目介绍

重要说明☝

☀该专栏在第三代软开发更新完将涨价

密码输入框

为什么不是一个普通的密码输入框，而是一个密码输入框呢，因为密码可以当普通输入框使用，普通输入框不能当密码框用呀，反正原理都差不多，这里咱们就直接搞一个密码输入框，一个正常输入框就是下图的样子

但是如果我把这个放到界面，我下个月的工资估计都领不到，所以还得和美工小姐姐沟通一下，整个下图的样子

这样是不是就可以了呢，其实这个在普通的输入框是没有的，需要我们自己组合一下，这里就直接上代码：

Rectangle
{
    width: 590
    height: 80
    color:"#00FFFFFF"
    border.width:1
    border.color:"#666666"
    radius:8
    Rectangle
    {
        width: parent.height
        height: parent.height
        color:"#00FFFFFF"
        Image {
            width: 36
            height: 45
            anchors.centerIn: parent
            source: "qrc:/Login/T_Resource/T_Image/Login/password.png"
        }
    }
    TextInput
    {
        id:input_UserPassword
        anchors.left: parent.left
        anchors.leftMargin: parent.height
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        verticalAlignment: TextInput.AlignVCenter
        leftPadding: 10
        echoMode: TextInput.Password
        clip: true
        font.pixelSize: 33
        font.family: "Source Han Sans CN"
        color: "#FFFFFF"
        anchors.fill: parent
    }
}

还是直接上代码：

Rectangle
{
    width: 590
    height: 80
    color:"#00FFFFFF"
    border.width:1
    border.color:"#666666"
    radius:8
    Rectangle
    {
        width: parent.height
        height: parent.height
        color:"#00FFFFFF"
        Image {
            width: 37
            height: 42
            anchors.centerIn: parent
            source: "qrc:/Login/T_Resource/T_Image/Login/user.png
        }
    }
    TextInput
    {
        id:input_UserName
        anchors.left: parent.left
        anchors.leftMargin: parent.height
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        verticalAlignment: TextInput.AlignVCenter
        leftPadding: 10
        clip: true
        font.pixelSize: 33
        font.family: "Source Han Sans CN"
        color: "#FFFFFF"
        onTextChanged: UserManagement.currentUserName = text
    }
}

大家有找区别所在了吗？echoMode: TextInput.Password

再分享一个其他的样式：

这个是不是更好实现，就把我第二个连的图标换成文字就可以了。代码如下：

Rectangle
{
    width: 313
    height: 37
    radius: 4
    color: "transparent"
    border.color: "#666666"
    border.width: 1
    Text {
        id:text_UserPassword_1
        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.verticalCenter: parent.verticalCe
        color: "#FFFFFF"
        font.pixelSize: 15
        font.family: "Source Han Sans CN"
        text: qsTr("原密码：")
    }
    TextInput
    {
        id:input_UserPassword_1
        anchors.left: parent.left
        anchors.leftMargin: text_UserPassword_1.w
        anchors.right: parent.right
        anchors.rightMargin: 5
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        verticalAlignment: TextInput.AlignVCenter
        leftPadding: 10
        echoMode: TextInput.Password
        clip: true
        font.pixelSize: 15
        font.family: "Source Han Sans CN"
        color: "#FFFFFF"
        anchors.fill: parent
    }
}

总结一下

其实项目中那些看是高大上的控件，不过都是一些基础控件的组合，不是有有句话吗，万物皆可Painter