zoukankan      html  css  js  c++  java
  • QML设计登陆界面

    QML设计登陆界面


    本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明.


    环境:

    主机:WIN7

    开发环境:Qt5.2


    说明:

    用QML设计一个应用的登陆界面


    效果图:



    源码:

    main.qml

    import QtQuick 2.0
    
    Rectangle
    {
        id: login_gui
    
         320; height: 480
    
        SystemPalette { id: activePalette }
    
        //背景图片
        Image
        {
            id: background
            anchors { top: parent.top; bottom: parent.bottom }
            anchors.fill: parent
            source: "pics/pic1.png"
            fillMode: Image.PreserveAspectCrop
        }
    
        //顶烂
        Item
        {
            id: top_bar
             login_gui.width; height: login_gui.height * 0.05
            anchors.top: login_gui.top
    
            Text
            {
                id: title
                anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
                text: "登陆"
                font.bold: true
                font.pointSize: login_gui.height * 0.05 * 0.7
                color: "dark red"
            }
        }
    
        //空白栏
        Item
        {
            id: space1
             login_gui.width; height: login_gui.height * 0.1
            anchors.top: top_bar.bottom
        }
    
        //登陆框
        Rectangle
        {
            id: rect1
             login_gui.width * 0.8; height: login_gui.height * 0.3
            anchors { top: space1.bottom; horizontalCenter: parent.horizontalCenter }
            border.color: "#707070"
            color: "transparent"
    
            LineInput
            {
                 rect1.width * 0.8; height: rect1.height * 0.2
                font_size:height * 0.7
                anchors {horizontalCenter: rect1.horizontalCenter; top: rect1.top; topMargin: 8}
                hint: "请输入用户号"
            }
    
            LineInput
            {
                 rect1.width * 0.8; height: rect1.height * 0.2
                font_size:height * 0.7
                anchors {horizontalCenter: rect1.horizontalCenter; bottom: btn_login.top;  bottomMargin: rect1.height * 0.1}
                hint: "请输入password"
            }
    
            Button
            {
                id: btn_login
                 rect1.width * 0.35; height: rect1.height * 0.2
                anchors { left: rect1.left; leftMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }
                text: "登陆"
                //onClicked: SameGame.startNewGame()
            }
    
            Button
            {
                id: btn_quit
                 rect1.width * 0.35; height: rect1.height * 0.2
                anchors { right: rect1.right; rightMargin: 28; bottom: rect1.bottom; bottomMargin: 8 }
                text: "退出"
                //onClicked: SameGame.startNewGame()
            }
        }
    }
    

    Button.qml

    import QtQuick 2.0
    
    Rectangle {
        id: container
    
        property string text: "Button"
    
        signal clicked
    
         buttonLabel.width + 20; height: buttonLabel.height + 5
        border {  1; color: Qt.darker(activePalette.button) }
        antialiasing: true
        radius: 8
    
        // color the button with a gradient
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: {
                    if (mouseArea.pressed)
                        return activePalette.dark
                    else
                        return activePalette.light
                }
            }
            GradientStop { position: 1.0; color: activePalette.button }
        }
    
        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: container.clicked();
        }
    
        Text {
            id: buttonLabel
            anchors.centerIn: container
            color: activePalette.buttonText
            text: container.text
        }
    }

    LineInput.qml

    import QtQuick 2.0
    
    FocusScope {
        id: wrapper
    
        property alias text: input.text
        property alias hint: hint.text
        property alias prefix: prefix.text
        property int font_size: 18
    
        signal accepted
    
        Rectangle {
            anchors.fill: parent
            border.color: "#707070"
            color: "#c1c1c1"
            radius: 4
    
            Text {
                id: hint
                anchors { fill: parent; leftMargin: 14 }
                verticalAlignment: Text.AlignVCenter
                text: "Enter word"
                font.pixelSize: font_size
                color: "#707070"
                opacity: input.length ? 0 : 1
            }
    
            Text {
                id: prefix
                anchors { left: parent.left; leftMargin: 14; verticalCenter: parent.verticalCenter }
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: font_size
                color: "#707070"
                opacity: !hint.opacity
            }
    
            TextInput {
                id: input
                focus: true
                anchors { left: prefix.right; right: parent.right; top: parent.top; bottom: parent.bottom }
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: font_size
                //color: "#707070"
                color: "black"
                onAccepted: wrapper.accepted()
            }
        }
    }
    



  • 相关阅读:
    js正则表达式中的问号使用技巧总结
    380. Insert Delete GetRandom O(1)
    34. Find First and Last Position of Element in Sorted Array
    162. Find Peak Element
    220. Contains Duplicate III
    269. Alien Dictionary
    18. 4Sum
    15. 3Sum
    224. Basic Calculator
    227. Basic Calculator II
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5324871.html
Copyright © 2011-2022 走看看