Jak zaprojektować wielopoziomowy układ płynów w QML

Question

Zaprojektowałem układ w QML, aby dowiedzieć się więcej o jego funkcjach i mam kilka pytań dotyczących "najlepszych praktyk" w projektowaniu takiego układu. Oto ona:

Zasadniczo jest to ColumnLayout składał się z trzech RowLayout s, każdy z niektórych Prostokąt s. Wielkość każdego rzędu i prostokąta należy obliczyć na przykład jako:

• Pierwszy rząd: wysokość = 40%, szerokość = 100%
  • czerwony prostokąt wypełniającego cały obszar
• drugi rząd Wysokość = 20%, szerokość = 100%
  • ciemnozieloną prostokąt: Wzrost = 100%, szerokość = 20%
  • jasnozielony prostokąt: Wysokość = 100%, szerokość = 80%
• Trzeci rząd: wysokość = 40%, szerokość = 100%
  • Ciemnoniebieski prostokąt: wysokość = 100%, szerokość = 40%
  • niebieski prostokąt: Wysokość = 100%, Szerokość = 20%
  • Light-niebieski prostokąt: Wysokość = 100%, Szerokość = 40%

QML ja wymyślił działa i jest w następującym. Mam kilka pytań o tym:

1. mam ustawić szerokość i wysokość procenty za pomocą Layout.preferredHeight: x * parent.height wzoru. Inne opcje powodowały pewne problemy (np. PreferredHeight powodował ostrzeżenia o pętli wiązania). Czy moje podejście jest prawidłowe i efektywne?
2. Jako narzędzie hakerskie ustawiłem Layout.fillWidth: true dla pierwszego elementu wiersza nr 2 i wiersza nr 3, co nie ma dla mnie sensu, ale działa. Jeśli ustawię ich szerokość w procentach (np. Layout.preferredWidth: 0.2 * parent.width) ich rząd zwinie się do szerokości 0. Czy jest to oczekiwane zachowanie? Czy istnieje lepszy sposób obejścia tego problemu?
3. Czy masz jakieś zalecenia dotyczące układów? Czy jestem na dobrej drodze?

Oto mój kod QML dla układu:

ApplicationWindow { 
    x: 500 
    y: 100 
    width: 250 
    height: 150 
    visible: true 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 0 
     RowLayout { 
      spacing: 0 
      Layout.preferredHeight: 0.4*parent.height 
      Layout.fillHeight: false 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "red" 
      } 
     } 
     RowLayout { 
      spacing: 0 
      Layout.preferredHeight: 0.2*parent.height 
      Layout.fillHeight: false 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "darkGreen" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 0.8*parent.width 
       color: "lightGreen" 
      } 
     } 
     RowLayout { 
      spacing: 0 
      Layout.preferredHeight: 0.4*parent.height 
      Layout.fillHeight: false 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "darkBlue" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 0.2*parent.width 
       color: "blue" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 0.4*parent.width 
       color: "lightBlue" 
      } 
     } 
    } 
} 

Aktualizacja:

Moje podejście wydaje się być bardziej hacky niż się spodziewałem:

1. Umieszczenie Tekst elementy jako dzieci w tym układzie powodują wiązanie ing pętli ostrzeżenia takie jak:

QML QQuickLayoutAttached: pętlowy wiąże wykryta właściwość "preferredWidth"

Jeżeli oblewania o wewnątrz prostokąt ostrzeżenia zniknie.

2. Rozstaw : 0 wydaje się odgrywać ważną rolę. Pominięcie go spowoduje ostrzeżenia o pętli wiązania.

Chociaż moje podejście do projektowania układów płynów w QML działa, ma pewne poważne problemy i może nie podlegać "najlepszym praktykom".

Answer 1

QtQuick.Layout nie zapewnia żadnych rzeczywistych ulepszeń w stosunku do klasycznego systemu kotwienia. Polecam, aby ich uniknąć. Możesz uzyskać znacznie większą kontrolę nad układem za pomocą kotwic.

Oto dokładnie ten sam projekt bez QtQuick.Layout:

ApplicationWindow { 
    x: 500 
    y: 100 
    width: 250 
    height: 150 
    visible: true 

    Column { 
     anchors.fill: parent 

     Row { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 0.4 * parent.height 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: parent.width 
       color: "red" 
      } 
     } 

     Row { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 0.2 * parent.height 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.2 * parent.width 
       color: "darkGreen" 
      } 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.8 * parent.width 
       color: "lightGreen" 
      } 
     } 

     Row { 
      anchors.left: parent.left 
      anchors.right: parent.right 
      height: 0.4 * parent.height 

      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.4 * parent.width 
       color: "darkBlue" 
      } 
      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.2 * parent.width 
       color: "blue" 
      } 
      Rectangle { 
       anchors.top: parent.top 
       anchors.bottom: parent.bottom 
       width: 0.4 * parent.width 
       color: "lightBlue" 
      } 
     } 
    } 
} 

Do tej pory nigdy nie spotkał żadnego projektu, który można było zrobić bez QtQuick.Layout.

Answer 2

Zabronione jest (i niepotrzebne) próba odniesienia szerokości i wysokości elementu nadrzędnego z elementów wewnątrz układu.

Kiedy fillWidth (lub fillHeight) jest ustawiony na true, potem przedmioty przydzielane są miejsca w stosunku do ich określona preferredWidth (lub preferredHeight).

Dlatego poprawny sposób tworzenia układu wygląda następująco. Zmieniłem wygląd tylko po to, aby pokazać, że odstępy można również dowolnie ustawiać. Brak pętli wiążących.

ApplicationWindow { 
    x: 500 
    y: 100 
    width: 250 
    height: 150 
    visible: true 

    ColumnLayout { 
     anchors.fill: parent 
     spacing: 5 
     RowLayout { 
      spacing: 5 
      Layout.preferredHeight: 40 
      Layout.fillHeight: true 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.fillWidth: true 
       color: "red" 
      } 
     } 
     RowLayout { 
      spacing: 5 
      Layout.preferredHeight: 20 
      Layout.fillHeight: true 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 20 
       Layout.fillWidth: true 
       color: "darkGreen" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 80 
       Layout.fillWidth: true 
       color: "lightGreen" 
      } 
     } 
     RowLayout { 
      spacing: 5 
      Layout.preferredHeight: 40 
      Layout.fillHeight: true 
      Text { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 40 
       Layout.fillWidth: true 
       color: "darkBlue" 
       text: "hello world!" 
       horizontalAlignment: Text.AlignHCenter 
       verticalAlignment: Text.AlignVCenter 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 20 
       Layout.fillWidth: true 
       color: "blue" 
      } 
      Rectangle { 
       Layout.fillHeight: true 
       Layout.preferredWidth: 40 
       Layout.fillWidth: true 
       color: "lightBlue" 
      } 
     } 
    } 
}