QTインタフェース効果


setStyleSheetグラフィックインタフェースの外観を設定する
分類:qt学習
2012-03-31 11:07
229人が読む
コメント(0)
コレクション
通報する
ソース:http://www.360doc.com/content/11/1122/10/7899729_166398154.shtmlsetStyleSheetを使用してグラフィックインタフェースの外観を設定する:QT Style Sheetsはウィンドウの外観をカスタマイズするのに有利なツールで、またサブクラスQStyleで完成することができて、彼の文法の大きな比重はhtmlのCSSに由来して、しかしウィンドウの概括に適用します:Style Sheetsは文字性の設定で、アプリケーション全体に対して使用することができます
QAPplication::setStyleSheet()または対応するウィンドウでQWidget::setStyleSheet
()は、いくつかのスタイルシートが異なる階層で設定されている場合、QTはすべてのスタイルシートを集めて外観を設定します.これをレベル直列と呼びます.たとえば、次のスタイルシートはすべてのQLineEditが背景色として黄色を使用すべきであることを指定し、すべてのチェック
ボックスは、テキスト色QLineEdit{background:yellow}QCheckBox{color:red}として赤を使用する必要があります.このカスタマイズでは、paletteパレットよりもスタイルシートの方が強力です.たとえば、Qpalette::Button roleを使用して設定します.
ボタンを赤に設定すると、Qpaletteを単独で使用するのは難しいカスタマイズが危険になります.スタイルシートは、現在のウィンドウスタイルの上部にスタイルシートが作用することを指定できます.これは、アプリケーションができるだけ自然に見えることを意味しますが、任意の
スタイルシートシステムのパラメータを考慮する必要がありますQpaletteのように、スタイルシートはチェックを提供していません.
ボタンの背景色は赤です.すべてのプラットフォームボタンに赤い背景があることを確認する必要があります.それ以外に、Qt Designはスタイルを提供します.
また、スタイルシートは、サブクラスQStyleを使用する必要がなく、アプリケーションに優れた外観を提供するために使用できます.
例えば、任意のピクチャをラジオボタンとチェックボタンとして指定して、それらを抜群にすることができます.この技術を使用して、
補助的なカスタマイズを得るために、いくつかのサブクラス、例えばstyle hint(スタイルヒント)を指定し、例Style Sheetを参照することができる.スタイルシートが有効な場合は、QWidget::style()を使用してQStyleを返します.スタイルシート構文:スタイルシート構文はHTML CSS構文と基本的に一致します.スタイルシートには、からなるスタイルルールのシーケンスが含まれています.
これらのルールによって影響されるウィンドウを指定し、どのプロパティが設定されるかを指定します.
ウィンドウでは、例えばQPShButton{color:red}が上にあり、ルールではQPShButtonは、{color:red}は、このゲージ
QPShButtonと彼のサブクラスが前景色として赤を使用することを指定します.フォント色で、大文字と小文字です.
別れはなく、color、ColoR、COLORについては同じです.いくつかのを同時にリストすることができ、カンマ","を使用して個々のを区別することができる.例えば、QPShButton,QLineEdit,QComboBox{color:red}部分は一対の属性である.値の対であり、{}で囲まれ、セミコロンを使用して個々の属性を区別する.
例えばQPShButton{color:red;background-color:white}はQt Style Sheets Referenceを参照して部品およびスタイルシートの属性リストを表示することができるスタイルシートのカスケード属性について次のコードの異なるbtn 1->setStyleSheet(「QPShButton{color:red}」);/前景色を設定すると、フォント色btn 1->setStyleSheet("QpushButton{background:yellow});背景色を赤とbtn 1->setStyleSheet("QpushButton{color:red;background:yellow});1番目のコードは黄色の背景しか表示できません.2番目は確かに赤いフォント、黄色の背景なので、1つの部品を設定するときは、同じ>setStyleSheet()に完全に書きます.ソースコード例:Dialog::Dialog(QWidget*parent):QDIalog(parent)、ui(new Ui::Dialog){ui->setupUi(this);this->setWindowFlags(this->windowFlags()
&Qt::WindowMaximizeButtonHint&Qt::WindowMinimizeButtonHint);//ダイアログの追加
最大化と最小化ボタン//layout=new QBoxLayout(this);    layout1=new QGridLayout(this);     btn1=new QPushButton(this);     btn1->setStyleSheet("QPushButton{color:red;background:yellow}");//設定前
景色は、フォント色//btn 1->setStyleSheet(「QpushButton{background:yellow}」);    btn1->setText("Button1");     btn2=new QPushButton(this);     btn2->setStyleSheet("QPushButton{color:red;background-color:rgb
(200155100)}");//rgbを使用して背景色btn 2->setText("Button 2");btn 3=new QPShButton(this);btn 3->setStyleSheet("QPShButton{background-image:url
(image/1.png);background-repeat: repeat-xy;background-position:
center;background-attachment: fixed;background-attachment: fixed;background-
attachment: fixed;;background-clip:padding}")//ボタンの背景画像を設定し、background-repeatは背景画像の繰り返しルールを設定できます.
必ずxy方向だけが繰り返されるので、画像は1回//background-positionで画像の位置を設定します.左(left)か右(right)か、どちらかです.
中央(center)は、上(top)か下(bottom)/background-attachmentかで、背景画像がボリューム化されているか、ウィンドウサイズと一致しているかを決めるために使用されます.
巻き取りbtn 3->setText("Button 3");     btn4=new QPushButton(this);      btn4->setStyleSheet("QPushButton{border: 3px solid red;border-
radius:8 px}")//枠幅と色を設定//border-top,border-right,border-bottom,border-leftをそれぞれ設定
ボタンの上下左右の枠、//同じくborder-left-color,border-left-style,border-left-widthがある.別々に来るのを待つ
彼らの色、スタイル、幅//border-imageを設定して、枠線の背景画像を設定します.//border-radiusは、枠線の弧を設定するために使用されます.フィレットのボタンbtn 4->setText(「Button 4」)を設定できます.//フォント設定//font-familyフォントが属するファミリーを設定し、//font-sizeフォントサイズ//font-styleフォントスタイル//font-weightフォントの濃淡//heightフォントの高低を設定//selection-color選択時の色を設定するedit 1=new QLineEdit(this);     edit1->setStyleSheet("QLineEdit{font: bold italic large\"Times New
Roman\";font-size:25px;color:rgb(55,100,255);height:50px;border:4px solid
rgb(155,200,33);border-radius:15px;selection-color:pink}")//親ウィンドウの設定//icon-size画像サイズを設定this->setWindowIcon(QIcon("image/1.png");this->setStyleSheet("QWidget{background:write url(image/2.png);icon-
size:20 px 5 px}")//ダイアログ全体の背景色を設定//this->setStyleSheet("QWidget{icon-size:20 px 5 px}");layout 1->addWidget(btn 1,0,0);layout 1->addWidget(btn 2,0,1);layout 1 ad->dWidget(btn 3,1,0);layout 1->addWidget(btn 4,1,1);layout 1->addWidget(edit 1,2,0);; } ここではwidgetメインウィンドウのcppファイルのみを出して、実行した結果を下図のようにします.
QT 界面效果_第1张图片コピーボードの貼り付けもスタイルシートで設定されたスタイルになっているのを見ましたQT 界面效果_第2张图片
 
 
 
//------------------------------------------------------------------------------------------------------222222222222----------------------------------------------------------------------------------------------------------
QTable WidgetとsetStyleSheet
分類:qt開発
2012-03-31 20:19
186人が読む
コメント(0)
コレクション
通報する
style sheetは鋭いので、今は主にGuiをしているので、効果をアピールすることに専念しましょう.
本題ですが、今日はtablewidgetを使って背景、item、headerの色を調整したいと思います.デフォルトでは疲れているように見えます.古いnew itemを使ってitemごとに色を指定するのは時間の無駄です.styleメソッドを思いつき、簡単な例を次に示します.
[cpp] view plain copy print ?
QTableWidget* tabWgt = new QTableWidget(3, 2);  
  •   

  • setStyleSheet(  
  •             "QTableWidget {"  

  •             "background-color: blue;"  
  •             "}"  

  •             "QTableWidget::item {"  
  •             "background-color: white;"  

  •             "}"  
  •             "QHeaderView::section {"  

  •             "background-color: red;"  
  •             "}"  

  •             );  
  •   

  •   
  • setCentralWidget(tabWgt);  
  •     QTableWidget* tabWgt = new QTableWidget(3, 2);
    
        setStyleSheet(
                    "QTableWidget {"
                    "background-color: blue;"
                    "}"
                    "QTableWidget::item {"
                    "background-color: white;"
                    "}"
                    "QHeaderView::section {"
                    "background-color: red;"
                    "}"
                    );
    
    
        setCentralWidget(tabWgt);


    一部はtablewidgetの背景色を指定し、後述しない場合、tableにitemがあるitemの色も背景色と一致します.
    2番目のセグメントはitemの色を指定します.
    3番目のセグメントはヘッダーの色を指定します.
    上ではtablewidgetのいくつかの基本色の使用を簡単に実証しただけです.効果は図のようです.