Chỉ định phông chữ cho nhiều thành phần Văn bản trong Qt QML

Question

Tôi có một tiện ích được chỉ định thông qua tệp QML. Tiện ích này chứa một cấp cao nhất Rectangle chứa hai số Columns. Mỗi số trong số Columns này chứa nhiều Text -elements. Tiện ích QML này được bao bọc trong một lớp con của QDeclarativeView trong C++.

Tôi muốn chỉ định phông chữ cho từng số Text này. Hôm nay tôi làm điều này bằng cách xác định tính chất cấp cao nhất:

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

và ràng buộc mỗi Text -elements đến các đặc tính này:

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

Đây không phải là rất thanh lịch và các lĩnh vực mới cần được thêm vào mỗi lần Tôi cần hỗ trợ cho một cái gì đó mới (ví dụ: phông chữ gạch dưới). Tôi đã không thể khai báo thuộc tính kiểu font và liên kết với điều này thay thế (tiện ích con trống và qmlviewer cảnh báo về "loại dự kiến ​​sau thuộc tính").

Có cách nào tốt hơn để chỉ định phông chữ cho tất cả Text -elements không?

Lưu ý! Tôi đang viết tay các tệp QML.

Answer 1

Một khả năng khác là để viết một phần QML mới, được thừa kế từ Text một bộ một số tính theo mặc định:

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

Một giải pháp khả thi là viết hàm, lặp lại trên children của phần tử đã qua (ví dụ: Column). Trong chức năng này tất cả các thuộc tính có thể được thiết lập:

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); 
    } 
} 

Mỗi phần tử, mà chứa thuộc tính useStyle được thiết lập để true, được phong cách. Điều này ngắn hơn, chỉ định kiểu theo cách thủ công, nhưng bạn vẫn có thể xác định yếu tố nào sẽ được tạo kiểu hoặc không.

Answer 3

Trong Qt 5.6 (ít nhất, có thể sớm hơn nữa), bạn có thể sử dụng Qt.font() để phân bổ động đối tượng phông chữ và tham chiếu đến nơi khác. Vì vậy, hoạt động này:

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

Text 
{ 
    color: fontcolor 
    font: parent.myFont 
} 

Thông tin thêm về Qt.font() đây: https://doc-snapshots.qt.io/qt5-5.6/qml-qtqml-qt.html#font-method