在Qt QML中指定许多Text-elements的字体

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传递的元素（例如 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样式。这比手动分配样式要短，但您仍然可以定义哪些元素应该设置样式。