Bluuum 2.0 tworzenie skórek – part 4


 

Layout

We wcześniejszej części rozmieszczamy elementy o stałych rozmiarach ustawionych wcześniej w pliku *.css. Czasem zachodzi potrzeba aby masz element (widżet)  zmieniał wielkość podczas zmiany wielkości jego rodzica (np zmiana wielkości listy odtwarzania). Aby nasz element zmieniał rozmiar musimy zastosować właśnie „Layout”.  Jest on niewidocznym elementem, więc nie ustawiamy dla niego żadnych właściwości w pliku *.css.  Zapewniam nam tylko odpowiednie zachowanie elementów, które się w nim znajdują. Plik konfiguracyjny obsługuje dwa rodzaje layoutów. Pierwszy z nich o nazwie „QHBoxLayout” – jest layoutem w którym elementy dodawane są w poziomie jeden po drugim. Drugi „QVBoxLayout” – jest layoutem, w którym elementy dodawane są w pionie jeden pod drugim. Oczywiście można dodać tylko jeden element. Aby było możliwe korzystanie z layoutu musimy ustawić go w widżecie do którego będziemy dodawać elementy. Dodanie takie dokonujemy nastepująco:

< id = QHBoxLayout; parent = mojWidzet; x = 0 ; y =0 ;visible = true >

Powyższa linijka ustawi nam layout w widżecie o nazwie mojWidzet. Teraz po prostu dodajemy inne widżety do naszego widżeta o nazwie „mojWidzet” tak jak miało to miejsce wcześniej z tą różnicą że będą ona zmieniały swój rozmiar (oczywiście musimy ustawić w pliku *.css jak maja ten rozmiar zieniać, ale o tym pożniej). Jeżeli jako id podamy „QHBoxLayout” lub „QVBoxLayout” zmienia się znaczenie dwóch właściwości: „x” oraz „y”. Nie oznaczają już one odległości od lewej i górnej krawędzi tylko x – oznacza margin (odległość między każdą krawędzią rodzica, (ponieważ layout wypełnia całego rodzica) , natomiast y – spacing (odległość między kolejnymi elementami w layoucie). Teraz przykład żeby to zobrazować. Mamy główny widżet (nazwa mainWidget) a w nim chcemy umieścić 3 inne widżety (nazwy odpowiednio w1, w2, w3)  tak aby wraz ze zmianą rozmiaru głównego widżetu ich rozmiar też się zmieniał.

Rys 1.

Rys 2.

Rys 1 oraz Rys 2 przedstawia takie oto ustawienia :

plik *.css  - ustawienie rozmiarów (dotyczy 3 widżetów, dla wszystkich takie same)

min-height : 30px; 

max-height:400px;

min-width:30px;

max-width:400px;

takie ustawienie powoduje że ze zmianą rozmiaru głównego widżetu rozmiar poszczególnych elementów zmienia się jednakwo.

plik *.cfg

< id = QHBoxLayout; parent = mainWidget; x = 20 ; y =40 ;visible = true >
< id = w1; parent = mainWidget; x = 0 ; y=  0 ; visible = true >
< id = w2; parent = mainWidget; x = 0 ; y=  0 ; visible = true >
< id = w3; parent = mainWidget; x = 0 ; y=  0 ; visible = true >

Aby widżety zmieniały swoje rozmiary musimy ustawić im minimalne i maksymalne wielkości zarówno szerokości jak i wysokości. ustawienia te znajduja się w pliku *.css. Następnie ustawiamy layout w widżecie, do którego będziemy dodawać elementy (linia 1 w pliku *cfg). W tym przypadku jest to widżet o nazwie mainWidget, dla ktorego ustawiamy layout typu „QHBoxLayout”. Ustawiamy również margin „x = 20″ oraz spacing „y = 40″. Margin oraz spacing sa widoczne na rysunku nr 1. Następnie dodajemy widżety do głównego widżetu (linia 2,3,4 pliku *.cfg). Na rysunku nr 2 widac jak zachowują się dodane widżety po zmianie rozmiaru głównego widżetu.

 

W sytuacji gdy chcemy aby np tylko widżet w środu zmieniał swoje rozmiary należy dokonać zmiany w pliku konfiguracyjnym *.css. Dla skrajnych widżetów ustawiamy takie ustawienia:

min-height : 30px; 

max-height:30px;

min-width:30px;

max-width:30px;

natomiast dla środkowego pozostają nie zmienione:

min-height : 30px; 

max-height:400px;

min-width:30px;

max-width:400px;

Obrazuje to rysunek poniżej :

 

Rys 3.

 

Jeśli ustawimy takie same minimalne i maksymalne wartości (zarówno szerokość jak i wysokość) to dany element nawet mając za rodzica widżet, który posiada layout nie będzie zmieniał rozmiaru. Analogicznie dziej się w layoucie „QVBoxLayout” z tą różnicą że widżety dodawane są z góry na dół. Wartość minimalna (szerokość jak i wysokość) określa minimalny rozmiar widżetu a wartość maksymalna jego maksymalną wielkość. Ustawienie margin oraz spacing na 0 powoduje że nie mamy odstępów między widżetami.