Как в QML создать родительский Компонент, который принимает экземпляры дочерних Компонентов и помещает их в иерархию родительских Компонентов?

Question

QML Qt имеет несколько виджетов, в которых вы создаете экземпляр виджета, а затем даете ему экземпляр Компонента для его отображения и использования.

Например, виджет Popup можно использовать как:

Popup { // <-- Parent Component
  Rectangle { // <-- Child Component
    width: 100;
    height: 100;
    color: 'red';
  }
}

Как я могу сделать это сам?Как я могу написать собственный компонент QML, который возьмет экземпляр дочернего компонента и поместит его под моим деревом?

Если у меня есть такой глупый компонент, как:

// File Parent.qml
Rectangle {
  default property var child_inst;
  width: child_inst.width + 20;
  width: child_inst.width + 20;
  color:'red';
  child_inst;  // <-- how is this done?
}

и используемый как:

Parent {
  Text { text: 'hello world!' }
}

Каков синтаксис или механизм, с помощью которого я могу создать или переместить child_inst, чтобы быть потомком моего Parent?

Answer 1

Ничего себе, это довольно запутанный способ выразить это, но если я правильно понимаю, вы хотите, чтобы дети фактически перенаправлялись на какой-то другой объект автоматически.Это возможно, например:

// Obj.qml
Rectangle {
  width: 50
  height: 50
  default property alias content: row.children
  Row {
    id: row
  }
}

, а затем:

  Obj {    
    Rectangle {
      width: 10
      height: 10
      color: "red"
    }
    Rectangle {
      width: 10
      height: 10
      color: "green"
    }
    Rectangle {
      width: 10
      height: 10
      color: "blue"
    }    
  }

В результате прямоугольники rgb отображаются в строке, потому что даже если они вложены в Obj, они внутренне делегированы в строку.

Использование свойства default означает, что вам не нужно указывать его вручную.Конечно, если вы не хотите этого, вы можете даже использовать несколько различных заполнителей, например, вы можете иметь:

  property alias content: contentItem.children // this is a column of contents
  property alias control: buttons.children // this is a row of buttons

Имейте в виду, что если вы не используете свойство по умолчанию, выпридется указывать объекты в виде списка через запятую в случае, если они кратны:

  Obj {
    content : [
      Rectangle {
        width: 10
        height: 10
        color: "red"
      },
      Rectangle {
        width: 10
        height: 10
        color: "green"
      },
      Rectangle {
        width: 10
        height: 10
        color: "blue"
      }
    ]
  }

В этом нет необходимости, если это один объект, его можно создать следующим образом:

  Obj {
    content : Rectangle {
      width: 10
      height: 10
      color: "green"
    }
  }

Но вы также можете использовать одну цель, и ваша строка вложит объекты во внешний объект, что избавит вас от необходимости беспокоиться о записи массива и даст вам больше гибкости:

  Obj {
    content : Row {
      // bunch of stuff here
    }
  }

В этом случаеcontent может быть простым позиционированным Item, который будет служить заполнителем, как в случае с всплывающим компонентом.

И, наконец, вы также можете использовать Loader, если выхотите указать встроенный компонент, то есть тот, который не определен в выделенном файле QML, но с использованием элемента Component.