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

时间:2023-03-09 04:01:38
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

}