Flickable + содержимое псевдонима свойства

Question

Я заметил странное поведение, которое мешает мне делать то, что я хочу.

Если у меня есть

Comp.qml:

Rectangle { 
    id: comp; 
    anchors.fill: parent 

    default property alias contents: flickable.children; 
    property int contentHeight: comp.height; 

    Flickable { 
     id: flickable; 
     anchors.fill: parent; 
     contentHeight: comp.contentHeight; 
    } 
} 

и

main.qml:

Rectangle { 
    id: root; 
    width: 400; 
    height: 400; 

    Comp { 
     contentHeight: 800; 
     Rectangle { 
      width: 800; 
      height: 800; 
      border.color: "black"; 
      border.width: 5; 
      Component.onCompleted: console.debug(parent) 
     } 
    } 
} 

flickable не работает.

Если я пытаюсь поставить все это в одном файле, он работает, как ожидалось:

main.qml:

Rectangle { 
    id: root; 
    width: 400; 
    height: 400; 

    Rectangle { 
     id: comp; 
     anchors.fill: parent 

     Flickable { 
      id: flickable; 
      anchors.fill: parent; 
      contentHeight: 800; 

      Rectangle { 
       width: 800; 
       height: 800; 
       border.color: "black"; 
       border.width: 5; 
      } 
     } 
    } 
} 

Я-то отсутствует?

Как сделать внешний компонент, содержимое которого доступно?

Answer 1

Как указано в docs:

товары, объявленные как дети в Flickable автоматически родительским к Flickable в contentItem. элементов, созданных динамически должны быть явно родительским к contentItem

Это не первый случай здесь, т.е. Rectangle получил родительским к Flickable себя и не обнажить ожидаемое поведение. Возможно, дополнение к children не вызывает правильное воспитание, в этом случае. В качестве быстрого исправления вы можете переустановить элемент, как только он будет добавлен в тип Comp.

Для обработки нескольких Item s внутри вашего Comp просто используйте уникального ребенка (a la ScrollView). Здесь я изменил пример, чтобы обрабатывать два Rectangle s (только добавленный clip до Comp, для эстетических целей).

В основном:

Rectangle { 
    id: root; 
    width: 400; 
    height: 400; 

    Comp { 
     contentHeight: col.height; 

     Column { 
      id: col 
      spacing: 20 
      Rectangle { 
       width: 800; 
       height: 800; 
       border.color: "black"; 
       border.width: 5; 
      } 

      Rectangle { 
       width: 800; 
       height: 800; 
       border.color: "black"; 
       border.width: 5; 
      } 
     } 

     Component.onCompleted: console.debug(col.parent) // <-- not flickable 
    } 
} 

В файле Comp.qml:

Rectangle { 
    id: comp; 
    anchors.fill: parent 
    default property alias contents: flickable.children; 
    property int contentHeight: comp.height; 

    Flickable { 
     z:1 
     clip: true  // just my taste! 
     id: flickable; 
     anchors.fill: parent; 
     contentHeight: comp.contentHeight; 
    } 

    onContentsChanged: {        // re-parenting 
     if(flickable.children[1] !== undefined) 
      flickable.children[1].parent = flickable.contentItem 
    } 
}