Подтвердить что ты не робот

Как повторно использовать код в QML

У меня есть этот кусок кода QML:

   Column {
       spacing: units.gu(2)
       anchors {
           fill: parent
           centerIn: parent
       }
       Row {
           spacing: units.gu(4)
           ...
       }
       Row {
           spacing: units.gu(4)
           ...
       }
       Row {
           spacing: units.gu(4)
           ...
       }
       Row {
           spacing: units.gu(4)
           ...
       }
    }

О лучших методах программирования QML, как повторно использовать код, чтобы избежать дублирования атрибутов общих элементов? например, в приведенном выше примере избегайте Rows "spacing: units.gu(4)".

Ответ 1

Поместите свой код в отдельный файл qml и используйте это имя в качестве элемента. например.

//Файл MyCustomRow.qml

Row {
       spacing: units.gu(4)
       ...
    }

Затем в другом файле qml:

   Column {
       spacing: units.gu(2)
       anchors {
           fill: parent
           centerIn: parent
       }
       MyCustomRow{

       }
       MyCustomRow{

       }
       MyCustomRow{

       }
       MyCustomRow{

       }
    }

Infact вы можете использовать ретранслятор:

Column 
{
           spacing: units.gu(2)
           anchors 
           {
               fill: parent
               centerIn: parent
           }

           Repeater
           {
               model : 5
               MyCustomRow
               {

               }
           }
}

Изменить:

Для этого в одном файле (как указано в комментарии) вы можете использовать Qml Component вместе с Loader элемент:

Column {
       spacing: units.gu(2)
       anchors {
           fill: parent
           centerIn: parent
       }


       Component 
       {
         id :  myCustomRow
         Row 
         {
            spacing: units.gu(4)
            ...
         }
       }

       Loader {
       sourceComponent : myCustomRow

       }
       Loader {
       sourceComponent : myCustomRow

       }
       Loader {
       sourceComponent : myCustomRow

       }
       Loader {
       sourceComponent : myCustomRow

       }
    }