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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值