QMLのTextでレイアウトを調整する

Qt 5.11、5.12あたりの情報です。

Windows、Mac、Android、iOSで動作するQMLを書いていて、フォントの違いによるレイアウト調整が面倒だったのでメモを残しておきます。

#Textの枠の中央に文字を配置する
height、widthで設定した領域のうち、どこに文字を配置するかの指定方法。

Text {
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
}

#Textの行間を調整する
以下の記述で、ピクセル数で行間を指定できます。

Text {
    lineHeightMode: Text.FixedHeight
    lineHeight: 20
}

それに対して、割合での行間指定方法。

Text {
    lineHeightMode: Text.ProportionalHeight //デフォルトなので省略可
    lineHeight: 1.8
}

#Textのトラッキング（文字間隔）
指定のピクセル数だけ、文字と文字の間隔があきます。マイナスだと狭まります。

Text {
    font.letterSpacing : 3
}

#Textの配置の調整にlineLaidOutを使う
テキストの１行ごとにx、y、width、heightを変更できます。
例えば2行目の幅を10ピクセルずつ狭めてテキストを配置するには、下記のようにします。

Text {
    onLineLaidOut: {
        if (line.number === 1)
        {
            line.x = line.x + 10
            line.width = line.width - 20
        }
    }
}

行ごとにx、y、width、heightを指定できるので、ボタンなどを避けて配置することが可能です。
行番号numberは0からはじまるので注意。
さらに、forceLayout()も併用すれば動的に変更できる…のかな。試してない。

#枠内に収まりきらなかったテキストをToolTipでホバー表示する
Textには、枠内にテキストが収まらなかった場合にtrueになる、truncatedというプロパティがあります。maximumLineCountかelideを設定することで、truncatedが有効になります。
同じく、MouseAreaのhoverEnabledをtrueにすることでcontainsMouseが有効になります。
上記の双方がtrueなら、ToolTipを表示させます。

Text {
    id: name
    wrapMode: Text.Wrap
    maximumLineCount: 1

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        ToolTip {
            visible: parent.containsMouse && name.truncated
            delay: 500
            text: name.text
            contentItem: Text { } //contentItemでTextをカスタマイズできる
            background: Rectangle { } //同じく背景も。
        }
    }
}

#qmlで使われるデフォルトのフォントを指定する
main関数で下記のように書くとデフォルトのフォントを指定できます。

    QGuiApplication::setFont(QFont("Arial"));

QGuiApplicationのオブジェクトを生成する前に実行すると良いようです。
QGuiApplicationのコンストラクタで生成されるQFontが最初からsetFontで指定したフォントになるためです。（OSデフォのQFontが生成されない）