如何在QML应用中显示在系统中的所有的字体

在这篇文章中，我们来显示在Ubuntu 手机中所有的已经有的字体．大家可以根据自己的需求来选择自己所需要的字体．我们已经在先前的文章＂ 如何在QML中使用不同的字体（font）＂已经展示了如何使用font来显示不同的字体．

我们可以通过如下的方式来显示所有的字体：

AvailableFonts.qml

import QtQuick 2.0
import Ubuntu.Components 1.1

Rectangle {
    color: "steelblue"
    property int size: 60

    ListView {
        clip: true
        anchors.fill: parent
        model: Qt.fontFamilies()

        delegate: Item {
            height: units.gu(4)
            width: ListView.view.width

            Row {
                height: parent.height
                width: parent.width

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: "I love you!"
                    width: units.gu(25)
                    font { family: modelData; pixelSize: size }
                }

                Text {
                    anchors.verticalCenter: parent.verticalCenter
                    text: modelData
                    color: "white"
                }
            }

            Rectangle {
                color: "red"
                height: 2
                width: parent.width
            }
        }
    }
}

在我们的Main.qml中，我们直接调用：

Main.qml

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: "fontlist.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)

    Page {
        title: i18n.tr("Font list")

        Text {
            id: txt
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            text: "我爱你 " + font.family + " " + font.pixelSize
            height: units.gu(3)
        }

        AvailableFonts {
            anchors.fill: parent
            anchors.topMargin:txt.height
        }
    }
}

运行我们的应用：

所有的源码在：　 https://github.com/liu-xiao-guo/fontlist