正确地在QML应用中使用fontsize

我们知道我们有时需要显示text文本，但是，在QML应用中，我们应该如何选择font的大小呢？在今天的这篇文章中，我们将展示在Ubuntu平台中的不同文字的大小。我们可以通过FontUtils来帮我们把“large”字体的text转换为pixel大小。

我们的测试应用如下：

import QtQuick 2.4
import Ubuntu.Components 1.3

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "fontsize.liu-xiao-guo"

width: units.gu(60)
height: units.gu(85)

property string fontsize: listview.currentItem.fontsize

Page {
title: i18n.tr("fontsize")

Component {
id: highlightBar
Rectangle {
width: 200; height: 50
color: "#FFFF88"
y: listview.currentItem.y;
Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
}
}

Column {
anchors.fill: parent
spacing: units.gu(2)

Text {
id: unitsgu
text: "1 units.gu = " + units.gu(1) + " pixels"
}

Row {
spacing: units.gu(1)
Text {
id: mytext
text: "我爱你！"
font.pixelSize: (FontUtils.sizeToPixels(fontsize)).toFixed(2)
}

Text {
text: mytext.font.pixelSize + " pixels"
}

Text {
text: (mytext.font.pixelSize/units.gu(1)).toFixed(2) + " units.gu"
}
}

Row {
spacing: units.gu(1)

Label {
id: mylabel
text: "我也爱你！"
fontSize: fontsize
}

Text {
text: mylabel.fontSize
}

Text {
text: (FontUtils.sizeToPixels(mylabel.fontSize)).toFixed(2) + " pixels"
}

Text {
text: (mytext.font.pixelSize/units.gu(1)).toFixed(2)+ " units.gu"
}
}

ListView {
id: listview
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: parent.height - mytext.height
highlight: highlightBar
model: ["xx-small","x-small", "small", "medium", "large", "x-large" ]
delegate: Text {
property string fontsize: modelData

text: modelData + " " + (FontUtils.modularScale(modelData)).toFixed(2)
font.pixelSize: units.gu(5)

MouseArea {
anchors.fill: parent
onClicked: {
listview.currentIndex = index
}
}
}
}
}

}
}

显示的界面如下：













我们可以通过改变在ListView中的font大小得到相应的pixsize及多少个units.gu值。根据这个，我们可以来选择我们适合的字体的大小。

整个项目的源码在：https://github.com/liu-xiao-guo/fontsize