Правильный способ компоновки 2 блока объектов

Question

У меня возникли проблемы с компоновкой объектов. Мне нужно создать 2 блока текстовых элементов. Второй блок должен следовать первым. Вот мой код:

import QtQuick 2.5 
import QtQuick.Window 2.2 
import QtQuick.Layouts 1.1 

Window 
{ 
    visible: true 
    id: page 
    Rectangle 
    { 
     id: contentRec 
     anchors.fill: parent 

     ColumnLayout 
     { 
      spacing: 16 

      anchors.fill: contentRec 
      anchors.margins: 16 

      Rectangle 
      { 
       id: hlpRec 
       color: "#fff" 

       ColumnLayout 
       { 
        anchors.fill: hlpRec 
        spacing: 8 

        Text 
        { 
         text: "Some text 1" 
         color: "#434D56" 
        } 

        Text 
        { 
         text: "Some text 1" 
        } 

        Text 
        { 
         text: "Some text 2" 
        } 

        Text 
        { 
         text: "Some text 3" 
        } 

        Text 
        { 
         text: "Some text 4" 
        } 
       } 
      } 

      Rectangle 
      { 
       Layout.preferredHeight: 16 
      } 

      Rectangle 
      { 
       id: infoRec 
       color: "#fff" 

       ColumnLayout 
       { 
        anchors.fill: infoRec 
        spacing: 8 

        Text 
        { 
         text: "Status text 1" 
        } 

        Text 
        { 
         text: "Status text 2" 
        } 

        Text 
        { 
         text: "Status text 3" 
        } 
       } 
      } 
     } 
    } 
} 

Проблема состоит в том, что второй блок перекрывает первый. Что не так с моим кодом?

Answer 1

Оба ваших внутренних компонента ColumnLayout установлены в соответствии с их родителями, которые не имеют ни их ширины/высоты, ни их свойств привязки, поэтому их размер равен нулю. Поскольку эти Rectangle s не обрезают их содержимое, вы видите, что элементы перекрываются.

При работе с Column или ColumnLayout высота контента будет рассчитываться исходя из того, что вы помещаете в эти контейнеры. Если вы сделаете это правильно, вы сможете создавать довольно гибкие и умные макеты без необходимости отслеживать индивидуальные высоты. Однако вы должны указать другое измерение, задав свойство width или соответствующие привязки. В случае Column и ColumnLayout вы хотите «привязать» ширину компонента, чтобы он соответствовал родительскому. В то же время вы можете оставить высоту безусловной, позволяя предмету расти вертикально. То же самое касается Row и RowLayout, где будет рассчитана ширина, и вы должны указать определенную высоту.

Решение в вашем случае может быть основано на ColumnLayout или Column. Обратите внимание, что hlpRec и infoRec были удалены, и были установлены привязки Column/ColumnLayout.

Via ColumnLayout:

import QtQuick 2.6 
import QtQuick.Layouts 1.1 

Rectangle { 
    anchors.fill: parent 

    ColumnLayout { 
     spacing: 16 

     anchors.fill: parent 
     anchors.margins: 16 

     ColumnLayout { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      spacing: 8 

      Repeater { 
       model: 5 
       Text { 
        text: "top " + index 
       } 
      } 
     } 

     Rectangle { 
      Layout.preferredHeight: 16 
      anchors.left: parent.left 
      anchors.right: parent.right 
      color: "#ff00ff" 
     } 

     ColumnLayout { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      spacing: 8 

      Repeater { 
       model: 5 
       Text { 
        text: "bottom " + index 
       } 
      } 
     } 
    } 
} 

Via Column:

import QtQuick 2.6 

Rectangle { 
    anchors.fill: parent 

    Column { 
     spacing: 16 

     anchors.fill: parent 
     anchors.margins: 16 

     Column { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      spacing: 8 

      Repeater { 
       model: 5 
       Text { 
        text: "top " + index 
       } 
      } 
     } 

     Rectangle { 
      height: 16; 
      anchors.left: parent.left 
      anchors.right: parent.right 
      color: "#ff00ff" 
     } 

     Column { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      spacing: 8 

      Repeater { 
       model: 5 
       Text { 
        text: "bottom " + index 
       } 
      } 
     } 
    } 
} 

ColumnLayout сконцентрируется элементы контента в отдельности и использует общую доступную высоту от окна, тогда как Column будет согласовывать все элементы сверху снизу, используя только высоту содержимого. При изменении высоты окна вы заметите различное поведение.

В случае эти Rectangle s используется для определения индивидуальных фонов, вы можете сделать что-то вроде этого (продемонстрировано с подходом, основанным на Column):

import QtQuick 2.6 

Rectangle { 
    anchors.fill: parent 

    Column { 
     spacing: 16 

     anchors.fill: parent 
     anchors.margins: 16 

     Rectangle { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: topColumn.height 

      color: "#ff0000" 

      Column { 
       id: topColumn 

       anchors.left: parent.left 
       anchors.right: parent.right 
       spacing: 8 

       Repeater { 
        model: 5 
        Text { 
         text: "top " + index 
        } 
       } 
      } 
     } 

     Rectangle { 
      height: 16; 
      anchors.left: parent.left 
      anchors.right: parent.right 
      color: "#ff00ff" 
     } 

     Rectangle { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: bottomColumn.height 

      color: "#0000ff" 

      Column { 
       id: bottomColumn 

       anchors.left: parent.left 
       anchors.right: parent.right 
       spacing: 8 

       Repeater { 
        model: 5 
        Text { 
         text: "bottom " + index 
        } 
       } 
      } 
     } 
    } 
} 

Надеется, что это помогает!