Указание шрифта для многих Text-элементов в Qt QML

Question

У меня есть виджет, указанный через файл QML. Этот виджет содержит верхний уровень Rectangle, который содержит два Columns. Каждый из этих Columns содержит множество Text -элементов. Этот виджет QML заключен в подкласс QDeclarativeView в C ++.

Я хочу указать шрифт для каждого из этих Text -элементов. Сегодня я делаю это, указывая свойства верхнего уровня:

property string fontfamily: "Arial"
property bool fontbold: false
property bool fontitalic: false
property int fontpixelsize: 11
property string fontcolor: "White"

и свяжите каждый Text -элемент с этими свойствами:

Text
{   
    color: fontcolor
    font.family: fontfamily
    font.bold: fontbold
    font.italic: fontitalic
    font.pixelSize: fontpixelsize
    ...
}

Это не очень элегантно, и новые поля необходимо добавлять каждый раз, когда мне нужна поддержка для чего-то нового (например, подчеркнутые шрифты). Я не смог объявить свойство типа font и связать его с этим (виджет пуст, и qmlviewer предупреждает об «ожидаемом типе после свойства»).

Есть ли лучший способ указать шрифт для всех Text -элементов?

Внимание! Я пишу от руки файлы QML.

Answer 1

Другая возможность - написать новый компонент QML, который наследуется от Text и устанавливает некоторые свойства по умолчанию:

StyledText.qml

import QtQuick 1.0

Text {
    // set default values
    color: "blue"
    font.family: "Arial"
    font.bold: true
    font.italic: true
    font.pixelSize: 12
}

main.qml

import QtQuick 1.0

Rectangle {
    Row {
        spacing: 10

        Column {
            StyledText {
                text: "Foo1"
            }
            StyledText {
                text: "Bar1"
            }
            StyledText {
                text: "Baz1"
            }
        }

        Column {
            StyledText {
                text: "Foo2"
            }
            StyledText {
                text: "Bar2"
            }
            StyledText {
                text: "Baz2"
            }
        }
    }
}

Answer 2

В Qt 5.6 (по крайней мере, возможно, и раньше) вы можете использовать Qt.font() для динамического выделения объекта шрифта и обращения к нему в другом месте. Итак, это работает:

property font myFont: Qt.font({
    family: fontfamily,
    bold: fontbold,
    italic: fontitalic,
    pixelSize: fontpixelsize
});

Text
{   
    color: fontcolor
    font: parent.myFont
}

Подробнее о Qt.font() здесь: https://doc -snapshots.qt.io / qt5-5.6 / qml-qtqml-qt.html # font-method

Answer 3

Одним из возможных решений является написание функции, которая перебирает children переданного элемента (например, Column). В этой функции могут быть установлены все свойства:

import QtQuick 1.0

    Rectangle {
    Row {
        spacing: 10

        Column {
            id: col1

            Text {
                property bool useStyle: true
                text: "Foo1"
            }
            Text {
                property bool useStyle: true
                text: "Bar1"
            }
            Text {
                property bool useStyle: true
                text: "Baz1"
            }
        }

        Column {
            id: col2

            Text {
                property bool useStyle: true
                text: "Foo2"
            }
            Text {
                text: "not styled"
            }
            Text {
                property bool useStyle: true
                text: "Baz2"
            }
        }
    }

    function setTextStyle(parentElement) {
        for (var i = 0; i < parentElement.children.length; ++i) {
            console.log("t", typeof parentElement.children[i]);
            if (parentElement.children[i].useStyle) {  // apply style?
                parentElement.children[i].color = "blue";
                parentElement.children[i].font.family = "Arial"
                parentElement.children[i].font.bold = true;
                parentElement.children[i].font.italic = true;
                parentElement.children[i].font.pixelSize = 12;
            }
        }
    }

    // set style
    Component.onCompleted: {
        setTextStyle(col1);
        setTextStyle(col2);
    }
}

Каждый элемент, содержащий свойство useStyle со значением true, получает стиль. Это короче, чем назначение стиля вручную, но вы все равно можете определить, какие элементы будут стилизованы или нет.