Różnica między szerokością, wysokością i niejawną szerokością/wysokością i odpowiadającymi przypadkami użycia w QML

Question

Jaka jest różnica między width/height i implicitWidth/Height w QML? Kiedy należy ustawić domyślne wymiary zamiast zwykłego? Kiedy należy prosić o ukryte wymiary zamiast zwykłego z komponentu/przedmiotu?

Answer 1

Ogólnie użycie implicitHeight/Width ma sens jedynie w przypadku komponentów wielokrotnego użytku.

Podaje wskazówkę dotyczącą naturalnej wielkości produktu bez wymuszania tego rozmiaru.

Jako przykład podajemy Image. Naturalny rozmiar obrazu zamapowałby jeden piksel z pliku obrazu na jeden piksel na ekranie. Ale pozwala nam to rozciągnąć, więc rozmiar nie jest wymuszany i można go przesłonić.

Powiedzmy teraz, że chcemy mieć galerię ze zdjęciami o nieznanym wymiarze, a my nie chcemy się rozwijać, a jedynie zmniejszać je, jeśli to konieczne. Musimy więc przechowywać naturalną wielkość obrazu. Oznacza to, że w grę wchodzi ukryta wysokość.

Image { 
    width: Math.max(150, implicitWidth) 
    height: Math.max(150, implicitHeight) 
} 

W komponentach niestandardowych można wybrać sposób definiowania rozmiarów.

Ten wybór jest, aby wszystkie wymiary w stosunku do składników root -node, może tak:

Item { 
    id: root 
    Rectangle { 
     width: root.width * 0.2 
     height: root.height * 0.2 
     color: 'red' 
    } 
    Rectangle { 
     x: 0.2 * root.width 
     y: 0.2 * root.height 
     width: root.width * 0.8 
     height: root.height * 0.8 
     color: 'green' 
    } 
} 

W tym przypadku, nie ma naturalnej wielkości obiektu. Wszystko działa idealnie dla każdego rozmiaru ustawionego dla komponentu.

Z drugiej strony, może się zdarzyć, że obiekt ma naturalną wielkość - np. jeśli masz wartości absolutnych w nim

Item { 
    id: root 
    property alias model: repeater.model 
    Repeater { 
     id: repeater 
     delegate: Rectangle { 
      width: 100 
      height: 100 
      x: 102 * index 
      y: 102 * index 
     } 
    } 
} 

W tym przykładzie należy dostarczyć użytkownikowi informacji o naturalnej wielkości, w których zawartość nie protude przedmiot. Użytkownik może nadal decydować o ustawieniu mniejszego rozmiaru i uporaniu się z występem, np. przez przycięcie go, ale potrzebuje informacji o naturalnym rozmiarze, aby podjąć decyzję.

W wielu przypadkach childrenRect.height/width jest dobrym miernikiem dla implcitHeight/Width, ale istnieją przykłady, w których nie jest to dobry pomysł. - np. kiedy zawartość przedmiotu ma x: -500.

Prawdziwym przykładem jest Flickable, który został specjalnie zaprojektowany, aby pomieścić większe przedmioty niż jego własny rozmiar. Posiadanie rozmiaru Flickable równego zawartości nie byłoby naturalne.

Należy również zachować ostrożność podczas korzystania z scale w niestandardowych komponentach, ponieważ funkcja childRect nie będzie wiedzieć o skalowaniu.

Item { 
    id: root 
    implicitWidth: child.width * child.scale 
    implicitHeight: child.height * child.scale 
    Rectangle { 
     id: child 
     width: 100 
     height: 100 
     scale: 3 
     color: 'red' 
    } 
} 

---

A na Twój komentarz: ja po prostu nie rozumiem, dlaczego lepiej jest ustawić implicitWidth/wysokość Zamiast ustawiać szerokość/wysokość wymiaru głównego danego składnika.

implicitWidht/Height nie są konieczne - QtQuick mógłby obejść się bez nich. Istnieją dla wygody i będą konwencją.

---

zasada

Gdy chcesz ustawić wymiar węzła głównego składnika wielokrotnego użytku, ustaw implicitWidth/Height.
W niektórych przypadkach ustaw dla węzła innego niż root, jeśli węzły są widoczne jako właściwość.
Zrób to tylko, jeśli masz ku temu powód (wiele oficjalnych składników jest dostępnych bez żadnych).
Podczas korzystania ze składnika ustaw width/height.

Answer 2

Nie mam ostatecznej odpowiedzi, ale mogę powiedzieć, co odkryłem. Po pierwsze, from the documentation:

implicitWidth: real

Definiuje naturalnej szerokości lub wysokości elementu, jeśli nie jest określona szerokość lub wysokość .

Domyślny rozmiar niejawny dla większości pozycji jest 0x0, jednak niektóre elementy mają wrodzoną niejawny wielkości, które nie mogą być pominięte, na przykład, Image i Text.

ale less informative for width:

szerokość

Definiuje pozycję i rozmiar elementu.

The width i height odzwierciedlają rzeczywisty rozmiar przedmiotu w scenie. Niejawny rozmiar jest jakąś nieodłączną własnością samego przedmiotu.

używam je w następujący sposób: Kiedy utworzyć nowy element i może być zmieniany, ustawić niejawny rozmiar wewnątrz obiektu . Kiedy używam tego obiektu, często ustawiam rzeczywisty rozmiar jawnie z zewnątrz.

Niejawny rozmiar obiektu można przesłonić, ustawiając wysokość i szerokość.

przykład: TextWithBackground.qml

Item { 
    implicitWidth: text.implicitWidth 
    implicitHeight: text.implicitHeight 
    // the rectangle will expand to the real size of the item 
    Rectangle { anchors.fill: parent; color: "yellow" } 
    Text { id: text; text: "Lorem ipsum dolor..." } 
} 

przykład: MyWindow.qml

Item { 
    width: 400 
    height: 300 
    TextWithBackground { 
     // half of the scene, but never smaller than its implicitWidth 
     width: Math.max(parent.width/2, implicitWidth) 
     // the height of the element is equal to implicitHeight 
     // because height is not explicitly set 
    } 
} 

---

_{1) W przypadku niektórych elementów, takich jak tekst, wysokość zależy od niejawny (nie-niejawna) szerokość.
2) Niejawny rozmiar zazwyczaj zależy od domyślnego rozmiaru jego dzieci.}