Bluuum 2.0 tworzenie skórek – part 7


Lista odtwarzania - plMainWidget

Przystosowanie do tworzenia obramowania :

Powyższy rysunek pokazuje jak lista odtwarzania przystosowana jest do zmiany rozmiaru z obramowaniem. Domyślnie lista podzielona jest na 9 części. Obramowanie tworzymy w następujący sposób :

  • Elementy o numerach 1,3,7,9 to narożniki (do tych elementów wczytujemy zdjęcie z odpowiednim narożnikiem). Ich rozmiar jest stały. Ustawiamy zarówno ich maksymalną wielkość jak i minimalną wielkość, dlatego nie zmieniają się podczas zmiany całej listy dlatego możemy wczytać obraz narożnika i nic się z nim nie stanie podczas zmiany rozmiaru.
  • Elementy o numerach 2,4,6 posiadają obraz który jest powielana podczas zmiany rozmiaru. Dla elementów 2 i 8 ustawiamy tylko maksymalną i minimalną wysokość (obie właściwości mają tą samą wartość) natomiast ich szerokość pozostaje zmienna. Natomiast z elementami 4,6 postępujemy odwrotnie. Ustawiamy maks i min szerokość natomiast wysokość pozostaje zmienna.
  • Element numer 5 jest środkiem naszej listy odtwarzania.

Teraz jak to wygląda w aplikacji, przykład z opisem elementów:

Numery na obu zdjęciach opisują te same elementy.

  1. QFrame#frame3 – prawy górny róg
  2. QFrame#frame2 – górna krawędź
  3. QFrame#frame1 – lewy górny róg
  4. QFrame#frame4 – lewa krawędź
  5. QFrame#frame5 – środek
  6. QFrame#frame6 – prawa krawędź
  7. QFrame#frame7 – lewy dolny róg
  8. QFrame#frame8 – dolna krawędź
  9. QFrame#frame9 – prawy dolny róg
  10. QFrame#plTitleBar – belka tytułowa listy odtwarzania (przenoszenie listy)
  11. QWidget#plMainWidget - główny widżet listy odtwarzania

Srodkowy element (QFrame#frame5) zawiera naszą listę utworów, czyli widżet QTableWidget#songTable. Ustawienia tego widżetu można podzielić na:

/* główny widżet */
QTableWidget#songTable{	}

/* pojedynczy utwór (po najechaniu kursorem) */
QTableWidget::item:hover#songTable { }	

/* pojedyńczy utwór (zaznaczony) */
QTableWidget::item:selected#songTable { }

/* pojedyńczy utwór (aktywny) */
QTableWidget::item:focus#songTable {  }

 /* pojedyńczy utwór - ustawienia ogólne */
QTableWidget::item#songTable {  background-color : rgba(20,20,20,250); 	/*color : rgb(250,250,250); - tego nie ustawiamy*/  }
/* USTAWIENIA SCROLLBAR */
QTableWidget#songTable QScrollBar::vertical {	background: rgb(30,30,30);	border : 1px solid rgb(60,60,60);	width: 16px;	margin-top:13px;	margin-bottom:13px;}

/* button add-line (scroll down button) */
QTableWidget#songTable QScrollBar::add-line:vertical{	 }

/* button sub-line (scroll up button) *
/QTableWidget#songTable QScrollBar::sub-line:vertical {  }

/* sub-line icon */
QTableWidget#songTable QScrollBar::up-arrow:vertical{  }

/* add-line icon */
QTableWidget#songTable QScrollBar::down-arrow:vertical{  }

/* scroll bar handle */
QTableWidget#songTable QScrollBar::handle:vertical {  }

Aby ustawić kolor aktualnie odtwarzanego utworu należy ustawić :

/* kolor utworu na liście gdy jest aktualnie odtwarzany */
QLabel#playingSongColor{ color : #d23434;}

Przy tworzeniu skórek można wzorować się na gotowym pliku zarówno *.cfg jak i *.css. Przykładowe pliki dostępne tutaj.