qml 封装技巧-利用数据来进行适配

Text属于用的频率比较高而且需要定义的地方又比较多的地方，看一下如下的把Text封装成Label进行使用。

使用的例子：

Label {

id: titleLabel

            anchors {
                left: parent.left
                right: parent.right
                margins: units.dp(16)
            }

            style: "title"
            text: "Edit info"
        }

封装的原始代码：

import QtQuick 2.0

Text {

id: label

property string style: "body1"

property var fontStyles: {
    "display4": {
        "size": 112,
        "font": "light"
    },

    "display3": {
        "size": 56,
        "font": "regular"
    },

    "display2": {
        "size": 45,
        "font": "regular"
    },

    "display1": {
        "size": 34,
        "font": "regular"
    },

    "headline": {
        "size": 24,
        "font": "regular"
    },

    "title": {
        "size": 20,
        "font": "medium"
    },

    "dialog": {
        "size": 18,
        "size_desktop": 17,
        "font": "regular"
    },

    "subheading": {
        "size": 16,
        "size_desktop": 15,
        "font": "regular"
    },

    "body2": {
        "size": 14,
        "size_desktop": 13,
        "font": "medium"
    },

    "body1": {
        "size": 14,
        "size_desktop": 13,
        "font": "regular"
    },

    "caption": {
        "size": 12,
        "font": "regular"
    },

    "menu": {
        "size": 14,
        "size_desktop": 13,
        "font": "medium"
    },

    "button": {
        "size": 14,
        "font": "medium"
    },

    "tooltip": {
        "size_desktop": 10,
        "size": 14,
        "font": "medium"
    }
}

property var fontInfo: fontStyles[style]

font.pixelSize: units.dp(!Device.isMobile && fontInfo.size_desktop
        ? fontInfo.size_desktop : fontInfo.size)
font.family: "Roboto"
font.weight: {
    var weight = fontInfo.font

    if (weight === "medium") {
        return Font.DemiBold
    } else if (weight === "regular") {
        return Font.Normal
    } else if (weight === "light") {
        return Font.Light
    }
}

font.capitalization: style == "button" ? Font.AllUppercase : Font.MixedCase

color: Theme.light.textColor

}