Qt StyleSheet Kullanımı
StyleSheet widgetlerin görünümlerinde çeşitli değişiklikler yapmayı mümkün kılan bir Qt özelliğidir. StyleSheet kullanılarak widgetlerin örneğin köşeleri yuvarlatılabilir veya renklerinde değişiklik yapılabilir.
Qt style sheet terminolojisi ve sözdizimi hemen hemen HTML CSS sözdizimi ile aynıdır.Stylesheet'in sözdizimi, birbiri ardına gelen stil kurallarından oluşur. Bir stil kuralı, bir seçici ve bir tanımlamadan oluşur. Seçici, hangi widgetların stil kuralı tarafından etkileneceğini belirtirken tanımlama hangi özelliklerin widgeti etkileyeceğini belirler.
Örneğin;
QPushButton { color:red }
Buradaki stil kuralında seçici QPushButton, tanımlama ise { color:red }. Bu tanımlamaya göre QPushButton ve tüm alt sınıfları ( form üstünde oluşturulan tüm butonlar ) arka planı kırmızı olarak görüntülenir.
Araya virgül konularak farklı seçiciler aynı tanımlama için kullanılabilirler.
Örneğin ; QPushButton, QLineEdit, QComboBox { color: red }
gibi bir tanımlamada, QPushButton, QLineEdit, QComboBoxdan türetilen tüm widgetlar kırmızı renkte olacak.
Eğer aynı seçiciden türeyen widgetların farklı özellikler göstermesini istersek bu durumda seçici tanımlamamızı
seçici#nesne {} şeklinde yaparız. Yani örneğin bir butonun arka planının kırmızı renkte, diğerinin mavi renkte olmasını istersek
QPushButton#ileri_Button { background-color:red }
QPushButton#geri_Button { background-color:blue }
şeklinde tanımlama yaparız.
Eğer bir widgetin farklı durumlar için farklı şekilde davramasını istersek bu durumda seçici tanımlamamızı seçici#nesne:olay {} şeklinde yaparız. Gene buton örneğinden yola çıkarsak butonun basılmağı zamanda arka planının kırmızı renkte, basıldığında mavi renkte olmasını istersek:
QPushButton#ileri_Button { background-color:blue }
QPushButton#ileri_Button:pressed { background-color:red }
Bir widgetin stylesheet ile görünümünü değiştirmek için form üzerine sağ tıklanır ve change stylesheet seçeneği seçilir.
StyleSheet Değiştirme
Burada karşımıza çıkan Edit Style Sheet dialoğuna girdiğimiz parametreler ile widgetimiz şekillenecektir. Parametreleri elle girebileceğimiz gibi Edit Style Sheet dialoğunda bulunan Add Resource, Add Gradient, Add Color ve Add Font menülerinden de parametre belirleyebiliriz. Ayrica Edit Style Sheet dialoğuna yazdığımız değerlerin geçerli olup olmadığını dialogun sol alt kısmından görebiliriz.
Bir widget için aşağıdaki parametreleri girdiğimizde arkaplanı beyaz, sınırları gri ve köşeleri yuvarlatılmış bir widget elde ederiz.
QWidget#widget{
border: 2px solid gray;
border-radius: 20px;
background: white;
}
Görünümü Değiştirilmiş Widget
Şimdi de widget üzerine buton, lineedit ve labellar yerleştirip stylesheet değerlerini aşağıdaki gibi yapıyoruz:
Buton için:
QPushButton#pushButton{
color: rgb(0, 0, 0);
background-color: rgb(216, 240, 255);
border-width: 1px;
border-color: gray;
border-style: solid;
border-radius: 7;
font-size: 10px;
min-width: 50px;
max-width: 50px;
min-height: 17px;
max-height: 17px;
}
QPushButton#pushButton:Pressed{
color: rgb(0, 0, 0);
background-color: rgb(186, 210, 225);
border-width: 1px;
border-color: gray;
border-style: solid;
border-radius: 7;
font-size: 10px;
min-width: 50px;
max-width: 50px;
min-height: 17px;
max-height: 17px;
}
Lineedit için:
QLineEdit{
padding: 1px;
border-style: solid;
border: 2px solid gray;
border-radius: 8px;
}
Label için:
QLabel{
border: white;
border-radius: 40px;
background: white;
}
Elemanlarımızı widget üzerine yerleştirdikten sonra bunları gerekli layoutlarla ve spacerlarla widget üzerindeki konumlarını ayarlıyoruz ve formumuzu tasarımını bitiriyoruz.
Widgetlerin Form Üzerinde Ayarlanmış Hali
Formun Tamamlanmış Hali
StyleSheet parametrelerinden bazıları şunlardır:
background-color : Nesnenin arkaplan rengini değiştirir.
background-image : Nesneye arkaplan resmi atamak için kullanılır. background-image: url(resim_dosyası_yolu/dosya_adı);
border : Nesnenin sınırlarını ifade eder. "border:2px gray" gibi bir tanımlama yapıldığında widgetın sınırları 2 pixel kalınlığında ve gri renkte olur.
border-width : Widget sınırının kalınlığını ifade eder.
border-color : Widget sınırının rengini ifade eder.
border-top : Widget sınırının üst kenarını ifade eder, border-top-color, border-top-style ve/veya border-top-width değerlerini ayarlama imkanı verir.
border-right : Widget sınırının sağ kenarını ifade eder, border-right-color, border-right-style ve/veya border-right-width değerlerini ayarlama imkanı verir.
border-bottom : Widget sınırının alt kenarını ifade eder, border-bottom-color, border-bottom-style ve/veya border-bottom-width değerlerini ayarlama imkanı verir.
border-left : Widget sınırının sol kenarını ifade eder, border-left-color, border-left-style ve/veya border-left-width değerlerini ayarlama imkanı verir.
font : font-family, font-size, font-style, ve/veya font-weight değerlerini ayarlama imkanı verir. widgetın fontla ilgili ayarlamaları için ( font ailesi, font büyüklüğü, font stili veya font genişliği ) kullanılır.
min-width : Widgetin en düşük genişlik değerini ayarlamaya yarar.
max-width : Widgetin en büyük genişlik değerini ayarlamaya yarar.
min-height : Widgetin en düşük yükseklik değerini ayarlamaya yarar.
max-height : Widgetin en büyük yükseklik değerini ayarlamaya yarar.
text-align : Metnin hizalanmasını belirtir. text-align: left; metni sola hizalar, text-align: center; metni merkezde tutar.
Tavsiye edilen siteler;
