Question

我有一个通过QML文件指定的小部件。此小组件包含顶级Rectangle，其中包含两个Columns。这些Columns中的每一个都包含许多Text个元素。这个QML小部件包装在C ++中的QDeclarativeView的子类中。

我想为每个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的元素都会被设置样式。这比手动分配样式要短，但您仍然可以定义哪些元素应该样式化。

Answer 4

Necro 发布，但我觉得它仍然缺少最新的解决方案。 FontMetrics 无需使用 Qt.font() 即可解决问题。您可以在父项或 SIngleton 类型中声明它，并且可以将属性绑定到它。

这里有一个例子

Item {
id: root

FontMetrics {
    id: fontMetrics
    font.family: "Arial"
    font.pixelSize: 24
}

property alias font: fontMetrics.font

Text { font: root.font }
Text { font: root.font }
}

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

4 个答案: