Q&A
Qtでフォーム上にタブを配置し、
タブ位置をtabPositionをWestに設定することで左横にしました
またスタイルシートを設定することでタブを巨大化させました
そうしたところ、文字が縦になってしまいました(タブとしてはノーマルな動きかとは思いますが)
やりたいのは
その文字は横方向に文字を表示したいのと、背景画像を設定し、
画像と文字を重なるようにしたいです
//tabW:タブウィジェット //tab:index=0のタブ ui->tab->setStyleSheet("QWidget{background-image: url(C:/work/bottomBlue.png);transform: rotate( -45deg )}"); //全然効かない ui->tabW->setTabText(0,"テストタブ1"); ui->tabW->setStyleSheet("QTabBar::tab { height: 100px; width: 100px; }"); //タブ巨大化成功
としたところ、
と言うような画像になってしまいました
やりたいのは“テストタブ1”,"Tab2"となっているところを横方向に文字を表示し、背景画像と文字を重ねたいのですが何か方法は無いでしょうか
回答1件
0
ベストアンサー
横書きに修正
幾つか方法があります。
- QProxyStyleを使う (paintControl) PyQt5 の場合は注意点有り (PySideは未テスト)
- QTabBar の paintEvent をオーバーライドする (自分で描画処理を書く)
- QTabBar.setTabButton を使う
背景画像について
diff
1- `QWidget{background-image: url(C:/work/bottomBlue.png);` 2+ `QTabBar::tab{background-image: url(C:/work/bottomBlue.png);`
QWidgetは多くのウィジェットが継承しているクラスなので、
ボタンなども影響を受けてしまいます。
タブ部分のスタイルを設定するなら、QWidget ではなく QTabBar::tab に記述。
また、Qt の スタイルシートでは transform はサポートされてなかったはずです。
※↑色を変えただけみたいになってますが、壁紙画像を指定してます。
横書きに修正
追記: C++で動作確認したときのコードです。(QProxyStyleを利用して横書きに修正)
cpp
1 2#include <QApplication> 3#include <QMainWindow> 4#include <QTabWidget> 5#include <QTabBar> 6#include <QLabel> 7 8#include <QProxyStyle> 9#include <QStyleOption> 10#include <QtCore> 11 12 13class CustomTabStyle : public QProxyStyle { 14public: 15 QSize sizeFromContents(ContentsType type, const QStyleOption* option, 16 const QSize& size, const QWidget* widget) const { 17 18 QSize s = QProxyStyle::sizeFromContents(type, option, size, widget); 19 if (type == QStyle::CT_TabBarTab) { 20 s.transpose(); 21 } 22 return s; 23 } 24 25 void drawControl(ControlElement element, const QStyleOption* option, QPainter* painter, const QWidget* widget) const { 26 if (element == CE_TabBarTabLabel) { 27 if (const QStyleOptionTab* tab = qstyleoption_cast<const QStyleOptionTab*>(option)) { 28 QStyleOptionTab opt(*tab); 29 opt.shape = QTabBar::RoundedNorth; 30 QProxyStyle::drawControl(element, &opt, painter, widget); 31 return; 32 } 33 } 34 QProxyStyle::drawControl(element, option, painter, widget); 35 } 36}; 37 38int main(int argc, char *argv[]) 39{ 40 QApplication app(argc, argv); 41 QMainWindow win; 42 QTabWidget tab(&win); 43 QLabel labelA("Hello", &tab); 44 QLabel labelB("Hello", &tab); 45 CustomTabStyle style; 46 47 tab.addTab(&labelA, "日本語"); 48 tab.addTab(&labelB, "OK"); 49 tab.setTabPosition(QTabWidget::West); 50 tab.tabBar()->setStyle(&style); 51 52 win.setWindowTitle("Test"); 53 win.setCentralWidget(&tab); 54 win.show(); 55 56 return app.exec(); 57} 58
応用すれば、縦書きも可能です。
参考: 13293-QTabWidget-customization
簡単な方法
追記: 以下はPythonのコードでした。
コードは参考になりませんが、
アプローチ自体はC++でも同様の方法で可能です。
tab.addTab(widget, "") tab.tabBar().setTabButton(0, QTabBar.LeftSide, QLabel("日本語", tab))
QTabBar のサブクラスで描画する方法
追記: 以下はPythonのコードでした。
paintEvent() をオーバーライドして、自分で描画処理を書きます。
QProxyStyleを使う方法
こちらも自分で描画処理を書けますが、
描画オプションだけ変更して、元の描画処理に任せるとコードは少なく済みます。
python
1class FixTabStyle(QProxyStyle): 2 def sizeFromContents(self, content_type, option, size, widget=None): 3 size = QProxyStyle.sizeFromContents(self, content_type, option, size, widget) 4 if content_type == QStyle.CT_TabBarTab: 5 size.transpose() 6 return size 7 8 def drawControl(self, element, option, painter, widget=None): 9 if element == QStyle.CE_TabBarTabLabel: 10 option.shape = QTabBar.RoundedNorth 11 QProxyStyle.drawControl(self, element, option, painter, widget)
PyQt5 の QTabWidget で QTabBarに QProxyStyleを適用する場合の注意点
tab = QTabWidget(parent) tab.setTabPosition(QTabWidget.West) tab.setTabBar(QTabBar(tab)) # <- 必要 tab.tabBar().setStyle(FixTabStyle())
詳しい説明は省きますが、
C++のクラスに対してPythonの関数を設定しても呼ばれないので、
PyQtの提供する PythonのQTabBar を設定してます。(ここはC++であれば不要)
投稿2020/04/06 19:54
編集2020/04/08 14:03
総合スコア8760
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/06 19:57
2020/04/07 04:49
2020/04/07 13:00
2020/04/08 07:26
2020/04/08 07:28
2020/04/08 13:59
2020/04/08 14:21
2020/04/08 17:13 編集
2020/04/08 20:28
2020/04/09 12:44