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

у меня есть виджет, указанный через файл 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 от руки.

9
c++ qml qt user-interface

3 ответов

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

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"
            }
        }
    }
}
11

в 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

5

одним из возможных решений является запись функции, которая повторяет children переданного элемента (например, a 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, получает стиле. Это короче, чем назначение стиля вручную, но вы все равно можете определить, какие элементы должны быть стилизованы или нет.

3