正确地在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
                        }
                    }
                }
            }
        }

    }
}

显示的界面例如以下：

 

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVWJ1bnR1VG91Y2g=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt=""> 

  

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

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