我们知道我们有时须要显示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