Trolltech Colors

Qt の有名な 2 色を使ってみます。

Trolltech Green RGB(141, 192, 48) [CMYK 40/0/100/0]
Trolltech Purple RGB(131, 124, 172) [CMYK 39/39/0/0]

QML での実装です。

trolltechcolors.qml:

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Layouts 1.3

Window {
    id: window

    visible: true

    readonly property color trolltechGreen: Qt.rgba(141/255, 192/255, 48/255)
    readonly property color trolltechPurple: Qt.rgba(131/255, 124/255, 172/255)

    minimumWidth: topLayout.implicitWidth
    minimumHeight: topLayout.implicitHeight

    ColumnLayout {
        id: topLayout

        anchors.fill: parent
        spacing: 0

        Repeater {
            id: trolltechColors

            model: [ { "name": "Trolltech Green", "color": trolltechGreen },
                     { "name": "Trolltech Purple", "color": trolltechPurple } ]

            Rectangle {
                width: 2*fontMetrics.boundingRect(name.text).width
                height: 3*fontMetrics.height
                Layout.fillWidth: true
                Layout.fillHeight: true

                color: modelData.color

                Text {
                    id: name

                    anchors.centerIn: parent

                    text: modelData.name
                    color: "white"

                    FontMetrics {
                        id: fontMetrics

                        font: name.font
                    }
                }
            }
        }
    }
}

FontMetrics は Text の子オブジェクトですが Item を継承していないので parent プロパティーはありません。従って、Text の font を参照するには id 修飾が必要です。

C++ での実装です。

main.cpp:

#include <QApplication>
#include <QLabel>
#include <QPalette>
#include <QFontMetricsF>
#include <QLayout>

class TrolltechColors : public QWidget
{
    Q_OBJECT

public:
    TrolltechColors();

private:
    QLabel* makeColorLabel(const QString& text, const QColor& color) const;
};

TrolltechColors::TrolltechColors()
    : QWidget(0)
{
    const auto topLayout = new QVBoxLayout(this);
    topLayout->setMargin(0);
    topLayout->setSpacing(0);
    topLayout->addWidget(makeColorLabel("Trolltech Green", QColor(141, 192, 48)));
    topLayout->addWidget(makeColorLabel("Trolltech Purple", QColor(131, 124, 172)));
}

QLabel* TrolltechColors::makeColorLabel(const QString& text, const QColor& color) const
{
    const auto label = new QLabel(text);
    label->setAutoFillBackground(true);

    QPalette labelPalette = label->palette();
    labelPalette.setColor(QPalette::Window, color);
    labelPalette.setColor(QPalette::WindowText, "White");
    label->setPalette(labelPalette);

    const QFontMetricsF fontMetricsF(label->font());

    label->setMinimumWidth(2*fontMetricsF.width(label->text()));
    label->setMinimumHeight(3*fontMetricsF.height());

    label->setAlignment(Qt::AlignCenter);

    return label;
}

int main(int argc, char** argv)
{
    QApplication app(argc, argv);

    TrolltechColors trolltechColors;
    trolltechColors.show();

    app.exec();
}

#include "main.moc"

QLabel::fontMetrics() は QFontMetrics を返すので QML が使っている QFontMetricsF よりも幅や高さが大きくなります。そこで QFontMetricsF を使って同じサイズになるようにしています。

実行結果は左から順に QML で renderType にデフォルトの Text.QtRendering と Text.NativeRendering、QLabel で QFontMetricsF と QLabel::fontMetrics() です。QML の Text.NativeRendering は QLable と同じようにテキスト描画されます。QML の Text.QtRendering ではこれらと違いテキストが細くなっています。しかし、FontMetrics で求めるサイズは renderType に依存しません。

QML renderType: Text.QtRendering

QML renderType: Text.NativeRendering

QLabel QFontMetricsF

QLabel fontMetrics()