正确地在QML应用中使用fontsize

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

我们的测试应用如下：

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

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"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    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)
                }

                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) + " 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
                    font.pixelSize: units.gu(5)

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

    }
}

显示的界面如下：

  

  

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

整个项目的源码在：git clone https://gitcafe.com/ubuntu/fontsize.git