QML - 如何停止將父元素的屬性繼承到ListView項目？

Question

我有ListView元素包含帶有屬性的Item，但是這個ListView元素在一些自定義元素中，我從Label元素有屬性別名。由於某種原因，Item從自定義父元素讀取此屬性，而不是從這個Item自身讀取，我如何阻止這種行爲並讓Item從它自己首先讀取屬性，如果這樣定義的話？

正如你可以看到我有以下邏輯：

• 菜單項只是一個QML Item
• 菜單是ListView的元素使用下面的默認屬性別名哪一個繼承兒童default property alias contents: addItem.children
• 自定義元素包含菜單與名稱__menu哪一個繼承使用此默認屬性別名的父項（自定義元素）的子項目別名default property alias contents: addItem.children

它在這個邏輯看起來有點問題，因爲我需要爲main.qml中描述的每個元素使用fontFamily屬性不同，但菜單項從父定製元素繼承此屬性，有沒有一種方法可以使用相同的名稱爲此屬性並使用自定義字體，當我需要和繼承父元素字體，如果屬性沒有設置？

Main.qml

import QtQuick 2.6 
import QtQuick.Controls 1.5 
import "breezequick" 

BreezeQuickApplicationWindow { 
    id: mainWindow 
    palette: mainPalette 
    BreezeQuickPalette { 
     id: mainPalette 
     theme: "dark" 
    } 
    BreezeQuickMenuBar{ 
     id: menuBar 
     palette: mainPalette 
     title: "Breeze Quick" 
     fontFamily: "Ubuntu" 
     BreezeQuickMenuItem{ 
      title: "Item 1" 
      fontFamily: "Ubuntu-Italic" 
     } 
     BreezeQuickMenuItem{ 
      title: "Item 2" 
      fontFamily: "Ubuntu-Bold" 
     } 
     BreezeQuickMenuItem{ 
      title: "Item 3" 
     } 
    } 

} 

Item元素：

import QtQuick 2.5 

Item { 
    id: root 
    property string title: "Menu Element" 
    property string fontFamily: "Ubuntu" 
    property string iconSource 
    signal trigerred() 
} 

菜單元素：包含菜單

import QtQuick 2.5 
import QtQuick.Window 2.2 

Item { 
    id: root 
    property int dpi: Screen.pixelDensity 
    property BreezeQuickPalette palette: BreezeQuickPalette 
    property alias currentIndex: menuList.currentIndex 
    property alias currentItem: menuList.currentItem 
    property alias count: menuList.count 
    property alias model: menuList.model 
    property bool boldCurrentItem: false 
    default property alias contents: addItem.children 
    property bool autoHideMenu: true 
    property int fontSize: 16 
    property int __menuHeight 
    property int __menuWidth 
    property int __maxWidth 
    anchors.fill: parent 
    opacity: 0 
    property int __menuX 
    property int __menuY 
    focus: visible 
    visible: opacity > 0 
    function show(x,y){ 
     __updateSize() 
     opacity = 1 
     if (x) {wrapper.x = x} else if (__menuX) {wrapper.x = __menuX} else {wrapper.x = 72} 
     if (y) {wrapper.y = y} else if (__menuY) {wrapper.y = __menuY} else {wrapper.y = 72} 
    } 
    function hide(){ 
     opacity = 0 
    } 
    function __updateSize(){ 
     var i=0 
     for (var child in menuList.contentItem.children){ 
      ++i 
      if (i == 1){ 
       __maxWidth = menuList.contentItem.children[child].width 
      } else if (i != 1) { 
       if (menuList.contentItem.children[child].width > __maxWidth) { 
        __maxWidth = menuList.contentItem.children[child].width 
       } 
      } 
     } 
     for (child in menuList.contentItem.children){ 
      menuList.contentItem.children[child].width = __maxWidth 
     } 
    } 
    Behavior on opacity { 
     NumberAnimation{ 
      duration: 150 
     } 
    } 
    Item { 
     id: addItem 
    } 
    Rectangle { 
     id: wrapper 
     color: palette.alternateBackground 
     implicitWidth: if (!__menuWidth) { 
          __maxWidth 
         } else { 
          __menuWidth 
         } 
     implicitHeight: if (!__menuHeight) { 
          if (menuList.count > 0) { 
           menuList.contentItem.children[0].height*menuList.count 
          } else { 
           dpi*19 
          } 
         } else { 
          __menuHeight 
         } 
     ListView{ 
      id: menuList 
      anchors.fill: parent 
      model: contents 
      delegate: menuElement 
      flickableDirection: Flickable.AutoFlickDirection 
      z: parent.z + 1 
      clip: true 
      boundsBehavior: Flickable.StopAtBounds 
     } 
     z: parent.z + 100 
    } 
    Rectangle { 
     id: shadow 
     anchors { 
      left: wrapper.left 
      top: wrapper.top 
      leftMargin: dpi 
      topMargin: dpi 
     } 
     opacity: 0.4 
     color: palette.shadeBlack 
     width: wrapper.width 
     height: wrapper.height 
    } 
    MouseArea{ 
     id: screenArea 
     anchors.fill: parent 
     onPressed: hide() 
    } 
    Component { 
     id: menuElement 
     Rectangle { 
      property bool isCurrentItem: ListView.isCurrentItem 
      id: menu 
      color: palette.alternateBackground 
      height: menuText.font.pixelSize*2.7 
      width: menuText.width + menuIcon.width + 12*dpi 
      Image { 
       id: menuIcon 
       anchors{ 
        verticalCenter: parent.verticalCenter 
        left: parent.left 
        leftMargin: 2*dpi 
       } 
       height: menuText.height 
       width: height 
       sourceSize.width: menuIcon.width 
       sourceSize.height: menuIcon.height 
       z: menuText.z 
       source: iconSource 
      } 
      Text { 
       id: menuText 
       anchors{ 
        verticalCenter: parent.verticalCenter 
        left: menuIcon.right 
        leftMargin: 2*dpi 
       } 
       text: title 
       font.family: fontFamily 
       color: palette.normalText 
       font.pointSize: fontSize 
       font.bold: boldCurrentItem ? isCurrentItem : false 
       z: parent.z + 1 
      } 
      Rectangle { 
       id: highlight 
       anchors { 
        fill: parent 
       } 
       opacity: (menuElementArea.pressed) ? 1 : 0 
       color: palette.focusColor 
       Behavior on opacity { 
        NumberAnimation { 
         duration: 100 
        } 
       } 
      } 
      MouseArea { 
       id: menuElementArea 
       anchors.fill: parent 
       hoverEnabled: true 
       onClicked: { 
        menuList.currentIndex = index 
        if (autoHideMenu) { 
         hide() 
        } 
        menuList.model[index].trigerred() 
       } 
       z: parent.z + 2 
      } 
     } 
    } 
    Keys.onReleased: { 
     if (event.key === Qt.Key_Back) { 
      if (visible){ 
       event.accepted = true 
       hide() 
      } 
     } 
     if (event.key === Qt.Key){ 

     } 
    } 
} 

自定義元素和繼承的菜單項：

import QtQuick 2.5 
import QtQuick.Window 2.2 

Item { 
    property int dpi: Screen.pixelDensity 
    property alias title: textTitleField.text 
    property alias fontFamily: textTitleField.font.family 
    id: root 
    implicitWidth: parent.width 
    implicitHeight: textTitleField.height*2.7 
    property bool menuHighlightEnabled: true 
    default property alias contents: __menu.contents 
    property BreezeQuickPalette palette: BreezeQuickPalette 
    BreezeQuickPalette{ 
     id: __palette 
     theme: palette.theme 
    } 
    signal menuClicked() 
    Rectangle { 
     id: bar 
     anchors.fill: parent 
     color: palette.alternateBackground 
     BreezeQuickMenuButton{ 
      id: menuButton 
      highlightEnabled: true 
      palette: __palette 
      anchors { 
       verticalCenter: parent.verticalCenter 
       right: parent.right 
      } 
      onClicked: { 
       menuClicked() 
       __menu.show() 
      } 
      height: parent.height 
     } 
     Text { 
      id: textTitleField 
      text: qsTr("Menu Bar ...") 
      font.pointSize: 18 
      font.bold: true 
      color: __palette.paperWhite 
      anchors { 
       verticalCenter: parent.verticalCenter 
       left: parent.left 
       leftMargin: 16 
      } 
     } 
    } 
    BreezeQuickMenu{ 
     id: __menu 
     palette: __palette 
     parent: root.parent 
     __menuX: root.x + root.width - menuButton.width/3 - __menu.__maxWidth 
     __menuY: root.y + menuButton.height/4 
    } 
} 

正如你所看到的畫面字體還是一樣的標題欄：

Answer 1

我可能是錯的，但我敢肯定，沒有字體家族命名爲「Ubuntu的大膽」和「Ubuntu的斜體」。您應該在文本元素中使用font.bold和font.italic屬性，而不是使文本變爲粗體或斜體。

Answer 2

那麼，找到快速解決方案。創建字體屬性並分配給每個項目，所以現在可以爲每個Item和MenuBar標題設置不同的字體和參數。但無論如何稱之爲不同的名稱。

菜單項：

import QtQuick 2.5 

Item { 
    id: root 
    property string title: "Menu Element" 
    property string fontFamily: "Ubuntu" 
    property string iconSource 
    property font itemFont 
    signal trigerred() 
} 

應用程序窗口：

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Controls 1.4 

ApplicationWindow { 
    visible: true 
    width: 640 
    height: 480 
    title: qsTr("BreezeQuick") 
    property BreezeQuickPalette palette: BreezeQuickPalette 

    style: ApplicationWindowStyle { 
     background: Rectangle { 
      color: palette.alternateBackground 
     } 
    } 

    signal loaded() 

    Component.onCompleted: 
     loaded() 

    FontLoader { 
     source: "qrc:/resources/fonts/ubuntu.ttf" 
    } 
    FontLoader { 
     source: "qrc:/resources/fonts/roboto.ttf" 
    } 
    FontLoader { 
     source: "qrc:/resources/fonts/oxygen.ttf" 
    } 
} 

main.qml

import QtQuick 2.6 
import QtQuick.Controls 1.5 
import "breezequick" 

BreezeQuickApplicationWindow { 
    id: mainWindow 
    palette: mainPalette 
    BreezeQuickPalette { 
     id: mainPalette 
     theme: "dark" 
    } 
    BreezeQuickMenuBar{ 
     id: menuBar 
     palette: mainPalette 
     title: "Breeze Quick" 
     titleFont { 
      family: "OxygenMono-Regular" 
      bold: true 
      pointSize: 20 
     } 
     BreezeQuickMenuItem{ 
      title: "Item 1" 
      itemFont{ 
       family: "Roboto-Regular" 
       bold: false 
       pointSize: 16 
      } 

     } 
     BreezeQuickMenuItem{ 
      title: "Item 2" 
      itemFont{ 
       family: "Ubuntu" 
       bold: false 
       pointSize: 16 
      } 
     } 
     BreezeQuickMenuItem{ 
      title: "Item 3" 
      itemFont{ 
       family: "OxygenMono-Regular" 
       bold: false 
       italic: true 
       pointSize: 16 
      } 
     } 
    } 
} 

那麼現在它可能使用不同的字體，但無論如何，它只是解決方法。