2016-04-19 25 views
1

プロパティを持つItemを含むListView要素がありますが、このListView要素は、Label要素のプロパティエイリアスを持つカスタム要素の基礎となります。何らかの理由でItemは、このItem自体からではなく、カスタムの親要素からこのプロパティを読み込みます。この動作を停止し、Itemがそのプロパティを最初に読み込むようにするにはどうすればいいですか?QML - ListViewアイテムに親要素の継承プロパティを停止する方法

私は、ロジック、次のしている見ることができるように:

  • メニュー項目をちょうどQML Item
  • メニューは、次のデフォルトプロパティの別名を使用してdefault property alias contents: addItem.children
  • カスタム要素はメニューが含まれている1人の継承子供のListView要素です名前が__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 
    } 
} 

あなたはタイトルバー上など、まだ同じ画像のフォントに見ることができるように:

enter image description here

答えて

1

私が間違っているかもしれないが、私は「Ubuntuの-太字」という名前のフォントファミリがないことをかなり確信していると"Ubuntu-Italic"代わりに、テキスト要素のfont.boldプロパティとfont.italicプロパティを使用して、テキストを太字または斜体にする必要があります。

+0

答えのためのおかげで、実際に私がBreezeQuickApplicationWindow要素から必要なフォントをロードし、後で質問を更新します – user3417815

0

これはすばやく見つかりました。作成されたフォントプロパティを各アイテムに割り当てたので、各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 
      } 
     } 
    } 
} 

まあについては、今では別のフォントを使用することは可能ですが、とにかくそれだけの回避策です。

enter image description here

関連する問題