Задание шрифта для многих текстовых элементов в 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

Одним из возможных решений является написать функцию, которая выполняет итерацию по 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 3

В 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