Qtアプリケーション開発において、QTreeWidgetとQHeaderViewの外観をカスタマイズするためのQSS（Qt Style Sheets）の実装方法について解説します。水平・垂直スクロールバーのカスタマイズや、ヘッダークリックイベントの制御も含みます。
QSSスタイルシートの例
/* ヘッダー部のスタイル */
QTreeWidget QHeaderView::section {
background-color: #ffffff;
color: #898989;
border: 1px solid #ffffff;
border-radius: 5px;
height: 40px;
margin: 5px 10px 0px 0px;
padding-left: 10px;
}
/* インデックスアイテムの基本スタイル */
QTreeWidget::item {
background-color: #ffffff;
color: #898989;
border: 1px solid #ffffff;
border-radius: 5px;
height: 40px;
margin: 5px 10px 0px 0px;
padding-left: 10px;
}
/* マウスホバー時のスタイル */
QTreeWidget::item:hover {
border: 2px solid #fafafa;
background-color: #cfe1fb;
}
/* 選択状態時のスタイル */
QTreeWidget::item:selected {
background-color: #cfe1fb;
}
/* ツリーブランチのアイコン */
QTreeView::branch:closed:has-children{
image: url(./image/treeclose.png);
}
QTreeView::branch:open:has-children{
image: url(./image/treeopen.png);
}
/* 垂直スクロールバー */
QScrollBar:vertical {
width: 10px;
background: #ffffff;
}
QScrollBar::handle:vertical {
background: #8b8b8b;
border-radius: 4px;
}
QScrollBar::handle:vertical:hover {
background: #787878;
}
/* 水平スクロールバー */
QScrollBar:horizontal {
height: 10px;
background: #ffffff;
}
QScrollBar::handle:horizontal {
background: #8b8b8b;
border-radius: 4px;
}
C++コードでのスタイル適用
QFile styleFile(":/styles/treeview.qss");
if (styleFile.open(QIODevice::ReadOnly | QIODevice::Text)) {
QString styleSheet = styleFile.readAll();
styleFile.close();
qApp->setStyleSheet(styleSheet);
}
QHeaderViewのクリックイベント対応
class カスタムヘッダービュー : public QHeaderView {
Q_OBJECT
public:
explicit カスタムヘッダービュー(Qt::Orientation 方向, QWidget* 親=nullptr)
: QHeaderView(方向, 親) {}
protected:
void mousePressEvent(QMouseEvent* イベント) override {
emit ヘッダークリックシグナル();
QHeaderView::mousePressEvent(イベント);
}
signals:
void ヘッダークリックシグナル();
};
// 使用例
カスタムヘッダービュー* ヘッダー = new カスタムヘッダービュー(Qt::Horizontal, treeWidget);
connect(ヘッダー, &カスタムヘッダービュー::ヘッダークリックシグナル, [=](){
treeWidget->clearSelection();
});
treeWidget->setHorizontalHeader(ヘッダー);
QTreeWidgetの常用プロパティ
- ui->treeWidget->setColumnWidth(0, 200) - 列幅設定
- ui->treeWidget->header()->setSortIndicatorShown(true) - ソート矢印表示
- ui->treeWidget->setAlternatingRowColors(true) - 行色交互
- ui->treeWidget->setRootIsDecorated(false) - ルートノードのアイコン非表示
QSS適用の注意点
セレクターの優先度によりスタイルが上書きされるケース：
/* 有効なスタイル */
#スタックウィジェット > QWidget > QGroupBox#グループボックス {
border: 1px solid #dedede;
}
/* 無効なスタイル（セレクターの優先度が低い） */
QGroupBox#グループボックス {
border: 1px solid #dedede;
}