Bluuum 2.0 tworzenie skórek – part 6

Góra aplikacji – playerFrame

Rozmieszczenie oraz nazwy elementów :

  1. QToolButton#mainMenuButton – przycisk menu.
  2. QToolButton#mainOptionsButton – przycisk ustawień.
  3. QLabel#labelTime – wyświetla aktualny czas
  4. QLabel#labelSeek – wyświetla miejsce ( czas ) podczas przeszukiwania
  5. MarqueeLabel#labelTrack – wyświetla aktualnie grana piosenkę
  6. QLabel#labelParametrs - wyświetla parametry utworu
  7. QToolButton#mainMinimizeButton – przycisk minimalizacji okna
  8. QToolButton#mainStickButton – przycisk „przyklejenia” aplikacji
  9. QToolButton#mainCloseButton – przycisk zamknij
  10. QToolButton#btnPrev – przycisk poprzedni utwór
  11. QToolButton#btnPlay – przycisk odtwarzania
  12. QToolButton#btnPause – przycisk pauza
  13. QToolButton#btnStop – przycisk zatrzymania odtwarzania
  14. QToolButton#btnNext – przycisk następny utwór
  15. QToolButton#btnOpenFiles – przycisk do dodawania piosenek do listy
  16. MySlider#sliderVolume – regulowanie głośności (suwak)
  17. MySlider#sliderBalance – regulowanie balansu (suwak)
  18. QToolButton#btnRand – przycisk odtwarzanie po kolei/odtwarzanie losowe
  19. QToolButton#btnRep – przycisk powtarzaj utwór
  20. MySlider#sliderSeek – przeszukiwanie utworu (suwak)
  21. QToolButton#btnHidePl – przycisk ukryj/pokaż listę odtwarzania
  22. QToolButton#btnEqualizer – pokaż/ukryj equalizer (nieaktywny)

Podane nazwy wykorzystywane są w pliku *.css natomiast w pliku *.cfg używamy części po znaku #. Budują aplikację każdemu elementowi ustawiamy wygląd i rozmiar (plik *.css) nastepnie ustawiamy jego rodzica oraz położenie (plik *.cfg).  Oczywiście rozmieszczenie elementów jest całkiem dowolne.

 

UWAGA

Widżet QMainWindow#Player oraz QFrame#playerFrame odgrywają kluczową role, dlatego ich ustawienia mają trochę inne znaczenie niż pozostałych (chodzi o rozmiar). Dla QMainWindow#Player ustawienia rozmiaru powinny wyglądać następująco :

QMainWindow#Player {
min-width  : 350px;
max-width  : 350px;
}

Ustawiamy tylko maksymalną i minimalną szerokość ! Oczywiście może ona mieć inne wartości, ale co do rozmiarów powinny znajdować się tylko te dwie linijki. Natomiast dla QFrame#playerFrame ważną role odgrywają następujące ustawienia:

QFrame#playerFrame{
min-width  : 350px;
min-height : 170px;
max-height : 420px;
}

Tutaj ważne są 3 właściwości :

  • minimalna szerokość – ustala nam najmniejszą szerokość aplikacji
  • minimalna wysokość – ustala wysokość aplikacji jeżeli ukryjemy listę odtwarzania lub gdy lista jest osobnym oknem
  • maksymalna wysokość – z tej wartości jest liczona domyślna szerokość listy odtwarzania (wysokość gdy lista nie jest osobnym oknem)

DOMYŚLNA WYSOKOŚĆ LISTY ODTWARZANIA = maksymalna wysokość – minimalna wysokość

 

WSKAZÓWKI

Aby po naciśnięciu przycisku była widoczna animacja kliknięcia należy ustawić wartość padding przy stanie pressed:

QToolButton#btnPlManager:pressed{ padding: 1px 1px -1px 1px; }

Dla przycisku jako ikonkę ustawiamy właściwość image nie background i nie background-image:

QToolButton#btnPlay{ image: url(PathToSkin:play.png); }

Ustawienie prawidłowego wyglądu suwaka nie jest proste. O konfigurowaniu suwaków można dowiedzieć się więcej tutaj Aby ustawić wygląd suwaka należy ustawić kilka rzeczy (suwak typu MySlider o nazwie sliderSeek ). Oto przykładowy kod :

MySlider#sliderSeek{
min-width : 309px;	max-width : 309px;
min-height : 9px;	max-height : 9px;
background : green;}

MySlider::groove:horizontal#sliderSeek {   
height: 7px;
background : rgba(12,12,12,10);   
margin: 2px 0;}

MySlider::handle:horizontal#sliderSeek{
width : 22px;
background: rgb(50,54,64);
border: 1px solid #5c5c5c;
margin: -1px 0;
border-radius: 3px;}

W następnej części trochę o liście odtwarzania.