第48篇(四十八)QML自定义控件 — 完成实现登入界面显示

1、前期准备

Label

文本设置、字体设置

text: "登入密码"
font.family: "微软雅黑"
font.pixelSize: 20

TextField

cursorVisible: true
selectByMouse: true    //鼠标选择,输入错误可以全选一次删除
selectionColor: "red"  //选中时的颜色显示
placeholderText: qsTr("请输入登入密码")
  • echoMode: TextInput.Normal 

指定文本在 TextInput 中的显示方式。

  • TextInput.Normal:按原样显示文本。 (默认)
  • TextInput.Password:显示平台相关的密码掩码字符而不是实际字符。
  • TextInput.NoEcho:不显示任何内容。
  • TextInput.PasswordEchoOnEdit:显示编辑时输入的字符,否则与 TextInput.Password 相同。

2、代码

Fjf_Login.qml

import QtQuick 2.0
import QtQuick.Controls 2.2

Item {

    property alias fontSize: textField.font.pixelSize
    property alias selectColor: textField.selectionColor
    property alias fontShow: textField.placeholderText
    property alias echoModeTmp: textField.echoMode

    TextField {
        id: textField
        //文字是水平居中的,靠主窗口上方
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 12
        font.family: "微软雅黑"
        color: "white"
        cursorVisible: true
        selectByMouse: true    //鼠标选择,输入错误可以全选一次删除
        selectionColor: "red"  //选中时的颜色显示
        placeholderText: qsTr("请输入登入密码")
        echoMode: TextInput.Normal
        width: 280
        height: 40
        background: Rectangle {
            border.width: 0
            radius: 4
            color: "blue"
            opacity: 0.05
            implicitHeight: 40
            implicitWidth: 280
        }
    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: "登入界面"
    color: "silver"

    Label {
        id: label_1
        anchors.top: parent.top
        anchors.topMargin: 108
        anchors.right: fjf_1.left
        anchors.rightMargin: 10

        text: "登入账号"
        font.family: "微软雅黑"
        font.pixelSize: 20
    }

    Fjf_Login {
        id: fjf_1
        anchors.top: parent.top
        anchors.topMargin: 100
        anchors.left: parent.left
        anchors.leftMargin: 200

        fontShow: "请输入登入账号"
    }

    Label {
        id: label_2
        anchors.top: parent.top
        anchors.topMargin: 188
        anchors.right: fjf_2.left
        anchors.rightMargin: 10

        text: "登入密码"
        font.family: "微软雅黑"
        font.pixelSize: 20
    }

    Fjf_Login {
        id: fjf_2
        anchors.top: parent.top
        anchors.topMargin: 180
        anchors.left: parent.left
        anchors.leftMargin: 200
        echoModeTmp: TextInput.Password
        fontShow: "请输入登录密码"
    }

    Button {
        id: button_1
        anchors.top: parent.top
        anchors.topMargin: 300
        anchors.left: parent.left
        anchors.leftMargin: 100
        width: 100
        height: 30
        background: Rectangle {
            height: 30
            width: 100
            color: button_1.down ? "silver" : "gray"
            Text {
                anchors.centerIn: parent
                text: "确定"
                font.pixelSize: 16
            }
        }
    }

    Button {
        id: button_2
        anchors.top: parent.top
        anchors.topMargin: 300
        anchors.left: parent.left
        anchors.leftMargin: 400
        width: 100
        height: 30
        background: Rectangle {
            height: 30
            width: 100
            color: button_2.down ? "silver" : "gray"
            Text {
                anchors.centerIn: parent
                text: "取消"
                font.pixelSize: 16
            }
        }
    }
}

3、结果显示

第48篇(四十八)QML自定义控件 — 完成实现登入界面显示

上一篇:vue el-tree使用render-content


下一篇:牛客寒假算法基础集训营3 B. 处女座的比赛资格(DAG上拓扑排序)