第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、结果显示

标签：控件,anchors,parent,top,left,界面显示,font,TextInput,自定义
来源： https://blog.csdn.net/fanjufei123456/article/details/123230841