qml 之 简约主题 --表单输入框

qml 之 简约主题 --表单输入框

TextFieldComponent.qml

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4



Item {

    id:textFieldComponentItem

    property alias label: label.text
    property alias text: textFieldComponent.text

    property var   bindRadio: null
    property var   borderColor: textFieldComponentItem.bindRadio == null?"#696969":
                                                                   (textFieldComponentItem.bindRadio.checked?"#6495ED":"#696969")

    property var   borderWidth: textFieldComponentItem.bindRadio == null?1:
                                                                   (textFieldComponentItem.bindRadio.checked?2:1)
    property var   leftMargin: 20
    property var   textFieldWidth: 150
    property var   labelWidth: 150


    Text
    {
        id: label
        width: textFieldComponentItem.labelWidth
        height: 30
        font.family: "微软雅黑"
        font.pointSize: 15
        color: textFieldComponentItem.borderColor

    }

    TextField
    {
        id:textFieldComponent
        anchors.left:label.right
        anchors.leftMargin:textFieldComponentItem.leftMargin

        style: TextFieldStyle
        {
            textColor: "#696969"
            background: Rectangle
            {
                radius: 5
                implicitWidth: textFieldComponentItem.textFieldWidth
                implicitHeight: 28
                color:"transparent"
                border.color: textFieldComponentItem.borderColor
                border.width: textFieldComponentItem.borderWidth
            }

            font
            {
                pointSize:12
                family:"微软雅黑"
            }
        }

    }
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import "./Component"


Window
{
    visible: true
    width: 640
    height: 480
    title: qsTr("My Component")

    ButtonComponent
    {
        x:20
        y:20
        width: 120
        height: 45
        text: "按钮1"
    }


    CheckBoxComponent
    {

        x:170
        y:30
        text: "复选框1"
        checked: true
    }

    CheckBoxComponent
    {

        x:170
        y:60
        text: "复选框2"
        checked: false
    }

    ComboBoxComponent
    {
        x:200
        y:60
        model: [1,2,3,4,5,]

    }


    SliderControl
    {
        width: 200
        height: 20
        x:50
        y:150
        maximumValue: 10
        stepSize:1

    }

    RadioButtonComponent
    {
        width: 130
        height: 40
        x:50
        y:200
        text: "单选按钮1"
    }

    RadioButtonComponent
    {
        width: 130
        height: 40
        x:200
        y:200
        text: "单选按钮2"
    }

    TextFieldComponent
    {
        x:50
        y:300
        labelWidth:60
        label: "用户名:"
    }

}