C ++ / Qtで開発している人の多くは、Qt Creatorのような環境に精通しています。QtCreatorの作成者は、機能だけでなく設計にも取り組みました。しかし、私は暗い配色とフラットなミニマリズムの愛好者として、パネルとグラデーションヘッダーの明るい背景が常に好きではありませんでした。

それはオープンソースのように思えます-それを取り、それを変更しますが、CSS形式でウィジェットのタイプを記述することができるQt Style Sheetsのようなものを発見するまで、経験不足と怠lazは私を止めました。

事前に警告します。次の内容はあまり汚くないかもしれませんが、ハックです。もちろん、彼はセキュリティホールを開いてパスワードを盗み、プラハのハッカーに送信しますが、インターフェースにはさまざまなアーティファクトが存在します。

環境の準備

UPD：不適切なパッチを適用する代わりに、サイバーボブのアドバイスに従って、-stylesheet = stylesheet.cssパラメーターを指定してQtCreatorを実行するだけで十分なので、すぐに再描画に進みます。

続けて

まず、環境のソースコードを取得します。展開し、コンストラクター./src/plugins/coreplugin/mainwindow.cpp:199

MainWindow::MainWindow()

./src/plugins/coreplugin/mainwindow.cpp:199

MainWindow::MainWindow()

に追加します。これは、おおよそ./src/plugins/coreplugin/mainwindow.cpp:199

にあり、識別マークが付いているため、すぐに見つけ~~て破棄~~できます。

 //$$MARKER //HACK: Injecting css to change appearance //       // Linux: /home/shed/.local/share/data/Nokia/QtCreator // Windows: C:\Document and Settings\user\Local Settings\Application Data QString csspath = QDesktopServices::storageLocation(QDesktopServices::DataLocation)+"/stylesheet.css"; QFile css(csspath); if (css.open(QIODevice::ReadOnly | QIODevice::Text)){ qDebug() << "NOTE: stylesheet loaded from" << csspath; QString style = QTextStream(&css).readAll(); qApp->setStyleSheet(style); } else { qDebug() << "NOTE: stylesheet not found in " << csspath; } //$$MARKEREND

怠け者は、最新の安定バージョン2.5.0の変更されたファイルを取ることができます

それから

qmake && make && ./bin/qtcreator

すべてが順調に進んだ場合、

NOTE: stylesheet not found in <--->/stylesheet.css

次に、このstylesheet.cssを作成し、検証のためにそこに書き込みます

 background: blue; color: red;

qtcreatorを再起動します（神経を節約するために、ワンクリックでqtcreatorを開始するようにエディターを構成する必要があります）。

当然のことながら、setStyleはすべてを青で塗りつぶしましたが、現在のドキュメントのクラスとメソッドのリストと出力パネルのスイッチという2つの反乱が現れました。その理由は2つあります。これらの要素はQWidgetの子孫ではなく、vryatliであるか、Qtスタイルシステムをバイパスして独自のレンダリング方法を使用します。

再描画

ご存知のように、スタイルシートはフォームのレコードのセットです。

 <>[, <>, ...] { <>: <>; <>: <>; ... <>: <>; }

これまでにこのようなことを書いたことがない場合は、チュートリアルのいくつかのレッスンで、以下で何が起こるかを理解できます。 Qtスタイルシートのドキュメントと例を後で読む必要があります。

セレクター

デーモン学では、デーモンを呼び出すには、その名前を知る必要があります。この場合、セレクターをコンパイルするには、クラス名、objectName、またはQ_PROPERTY（）およびsetProperty（）を使用して指定されたプロパティの値を知る必要があります。

Qt はすべてのCSS2セレクターをサポートします。ドキュメントによると最も便利なもの：

ユニバーサルセレクター	*	すべてのウィジェットに一致します。
タイプセレクター	QPushButton	QPushButtonクラスとそのサブクラスのインスタンスに対応します。
プロパティセレクター	QPushButton [flat = "false"]	フラットではないQPushButtonクラスのインスタンスに対応します。このセレクタを使用して、Q_PROPERTY（）を使用して指定されたQtプロパティを確認できます。 =の代わりに〜=を使用して、QStringList型のQtプロパティに指定のQString文字列が含まれているかどうかを確認することもできます。
クラスセレクター	.QPushButton	QPushButtonクラスのインスタンスに対応していますが、そのサブクラスには対応していません。式* [class〜= "QPushButton"]と同等です。
IDセレクター	QPushButton＃okButton	objectNameがokButtonであるQPushButtonクラスのすべてのインスタンスに一致します。
子孫セレクター	QDialog QPushButton	QDialogクラスの子孫（子、孫など）であるQPushButtonクラスのすべてのインスタンスに一致します。
子セレクター	QDialog> QPushButton	QDialogの直接の子孫であるQPushButtonクラスのすべてのインスタンスに一致します。

これまでのところ、型セレクターにのみ関心があり、プロパティを使用する方がより柔軟で適切ですが、これにはコードへの介入が必要です。

それでは、デザイナーをプレイしましょう。

思い出させてください、私たちはパネルに暗い背景を作りたかったのです。これを行うには、セレクターを選択する必要があります。これらのパネルには通常何が表示されますか？「プロジェクト」、「クラスの概要」、「タイプ階層」、「アウトライン」（女の子らしい「アウトライン」）のツリー、「ファイルシステム」、「ドキュメントを開く」、「ブックマーク」のリスト、デバッグパネルのテーブルなどe。標準のQListView、QTreeView、およびQTableVeiwの名前はQAbstractItemViewです。

したがって、stylesheet.cssに以下を記述します。

 QAbstractItemView { color: #EAEAEA; background: #232323; font-size: 9pt; }

まず、ウィンドウサイズを最小に減らして、より多くの要素が表示されるようにします。

私たちは欲しいものを手に入れましたが、（愛されていないにもかかわらず）パネルは外観を失い、チームもいませんでした。誰かがqApp->setStyle(new ManhattanStyle(baseName));

（）に沿って目をqApp->setStyle(new ManhattanStyle(baseName));

、おそらく目立たない行qApp->setStyle(new ManhattanStyle(baseName));

特に永続的な場合、ManhattanStyleをクリックすると、QProxyStyleを継承していることに気付く可能性があります。パネルの描画を再定義するのは彼です。そして、スタイルを設定するとすぐに舞台裏に出るのは彼です。

これらの色あせたボタンでたくさんのささいな美しさの仕事を期待して、私はささいなことをしないことに決め、QAbstractItemViewに加えて、すべてのウィジェットの父であるQMainWindowも見ました。

 QAbstractItemView, QMainWindow { color: #EAEAEA; background: #232323; font-size: 9pt; }

以下を開始します。

ほぼ必要なもの。タブ、ヘッダー、スクロールバーの白い点を隠すために残ります。

サブ要素と条件

CCS2と同様に、Qtスタイルシートはサブ要素と状態をサポートしています。フォーム内のレコードセレクター：

 <>::<>:<>

たとえば、 QScrollBar::left-arrow:horizontal

は、水平スクロールバーのすべての左矢印を選択します。

ホワイトスポットでどのように機能するかを見てみましょう。

QTreeViewおよびQAbstractItemViewの作成

開始するには、QAbstractItemViewで選択した項目の外観を次のように暗いものに変更します。

 QAbstractItemView::item:selected { color: #EAEAEA; background-color: #151515; }

比較する：

それではQTreeViewを扱いましょう。

その各行は、1つのサブ要素::アイテムと1つ以上の::ブランチで構成されます。

::標準状態に加えてブランチはさらに4つをサポートします：

^*青-目的の状態の要素


`:open`	`:adjoins-item`	`:has-children`	`:has-subling`

考えて、退屈な矢印を忘れて、グループ化された要素の反対側に小さな灰色の点を作ることにしました。したがって、必要なのは:closed:adjoins-item:has-children

です。次のようなパラメーターを取得します：

 QTreeView::branch:closed:adjoins-item:has-children { background: solid #777777; margin: 6px; height: 6px; width: 6px; border-radius: 3px; }

矢印が好きなら、image：またはborder-image：に渡されるurl（ファイル名）コンストラクトが必要です。これは、ハードドライブまたはQtリソースシステムに保存されている画像を背景または境界として設定します。

QScrollBarを変更する

Qtスタイルシートの目では、標準のスクロールバーは次のサブ要素で構成されています。

皮肉なことに、この3次元の素晴らしさを鈍いグレーグレーの帯に変え、ボタンを矢印と一緒に送信して、次の行で「不要な2012」賞を授与します。

 QScrollBar { border: none; background: #494949; height: 6px; width: 6px; margin: 0px; } QScrollBar::handle { background: #DBDBDB; min-width: 20px; min-height: 20px; } QScrollBar::add-line, QScrollBar::sub-line { background: none; border: none; } QScrollBar::add-page, QScrollBar::sub-page { background: none; }

取得するもの：

QTabBarを変更する

苦労せずに~~、リビングルームの~~タブをやり直します。ああ、開発者はこのウィジェットをだましませんでした：

サブ要素：:: tear（タブ区切り）および:: scroller（スクロールボタン）
追加のタブの状態の全体の分散::のみ-1 、:最初、：最後、：中間、：前-選択、：次選択、：選択、名前から明確な目的を明確にします。
疑似状態：上、左、右、下：パネルの向きによって異なります。
オーバーラップを作成するために使用できる負のフィールド

ファンタジーの場所があります。

覚えておく必要があるのは、QTabBarはQTabWidgetにあるため、ウィジェットを介して背景を変更し、パネルを介してタブのプロパティを変更する必要があります。しかし、私たちは気取らない人々であり、QMainWindowが背景の世話をしたので、細い目立たないタブを線でぼかします：

 QMainWindow, QAbstractItemView, QTreeView::branch, QTabBar::tab { ... QTabBar::tab:selected { font: bold; border-color: #9B9B9B; border-bottom-color: #C2C7CB; } QTabBar::tab:!selected { margin-top: 2px; }

QHeaderViewを変更する

知らなかった人のために、QtのこれらのテーブルヘッダーはすべてQHeaderViewです。 QTabBar ::タブと同じ状態を持つ1つのサブ要素::セクションがあります。

今回は、伝統から離れてグラデーションを塗りつぶすことにしました（はい、ここで可能です）。これを行うには、構造qlineargradient、qradialgradient、qconicalgradientを使用します。グラデーションはオブジェクト境界モードで指定されます。グラデーションがレンダリングされ、その左上隅が（0、0）にあり、右下隅が（1、1）にある長方形を想像してください。この場合の勾配パラメーターは、0〜1の小数として示されます。これらの値は、実行時に長方形の実際の座標に外挿されます。境界ボックスの外側にある値を指定することができます（たとえば、-0.6または1.8）。

次のデザインを使用しました。

 QHeaderView::section { background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565); color: white; padding-left: 4px; border: 1px solid #6c6c6c; }

それが私たちが求めたものです。

頑固なソケットを説得する

小さな問題が1つだけあります。

この分裂は、私たちの努力に完全に無関心であり、さらに、QWidgetのgreat祖父をセレクターとして示した場合でも、彼は無関心のままでした。それにもかかわらず、私はまださまざまなセレクターを試しました。初めて、QComboBoxとQLabelを使用したセレクターでそれを貫通することができました。

 QComboBox, QComboBox::drop-down { color: #EAEAEA; background: #232323; font-size: 9pt; border: none; padding: 1px 18px 1px 3px; min-width: 6em; } QLabel { border-style: solid; color: #EAEAEA; background: #232323; font-size: 9pt; }

顔の短所。分割の周りの少し容赦ない境界線スタイルのフレーム、したがって重い遺伝もどこでも不適切に漏れました。

ここで、偶然、常識の低下が現れました。子どもたち、ウィンドウの上部にあるボタンが一列に並んでいるのに、何がそんなに薄いのでしょうか？もちろん、これはQToolBarです！

私達は試みます：

 QToolBar { border-style: solid; border-style: outset; color: #EAEAEA; background: #333333; font-size: 9pt; }

ビンゴ！深刻な病気の痕跡はすべて消え、反逆者は素直に一般的な見解に加わりました。

まとめ

stylesheet.css

TODO：

色をエンコードするのではなく、パレットから取得する方が正確です。パレットからは、エディタのカラースキームに応じて塗りつぶすことができます。さらに、これらすべてを正しい追加の形式で配置し、スタイルを選択して独自の設定ページを追加し、場合によってはエディターを追加することもできます。まあ、最も望ましいのはもちろん、快適であるが厚いサイドパネルで体重を減らすことです。テキストを削除し、CSSファイルからそのデザインにアクセスしますが、これにはコードへのより深い介入が必要であり、一般に、まったく異なるストーリーが必要です。

DIY Qt Creatorの再設計