qt - Qt: QTabWidget のスタイリング

Question

私は Qt を使用しており、Qt Designer Editor で QTabWidget をセットアップしています。画像 1 で確認できます。

Tab4 の後でわかるように、右端まで空のスペースがあります。何らかの方法で、図 2 のようにそのスペースを色で埋める必要があります (フェードカラーを設定できることが最善の方法です)。 . または、別の解決策として、タブを浮かせて画面全体を覆うようにすることもできます。

現在、次のスタイルシートを使用しています。

QTabWidget::tab-bar {

 }

 QTabBar::tab {
  background: gray;
  color: white;
  padding: 10px;
 }

 QTabBar::tab:selected {
  background: lightgray;
 }

Qt スタイルシートを使用して QTabBar の背景色を設定する方法はありますか? または、Qt スタイルシートを使用してタブを端に浮かせることはできますか?

編集: 私は Caleb Huitt - cjhuitt が以下に提案した解決策を試しています。タブを展開するというアイデアは本当に気に入っていますが、機能させることができません。

Qt Designer Editor で QTabWidget->"Promote To ..." を右クリックし、"Base class name": QTabWidget "Promoted class name": ExpandableTabWidget を選択し、[add] をクリックしてから [Promote] をクリックします。

設定したQTabWidgetを保持するウィジェットのinitメソッドで

ui.tabWidget->SetTabsExpanding(true);

すべてが正常に構築されていますが、QTabbar は展開されません。

私は何か間違ったことをしていますか？

ありがとう！

score 18 · Accepted Answer

タブの展開と背景の色付けは、どちらもスタイルシートを使用して行うことができます。

タブを展開する場合、スタイルシートをタブに適用して、タブの幅をの全幅の一部に設定できますQTabWidget。サイズ変更時にスタイルシートを更新する必要があるため、イベントフィルターを使用して適用されます。以下の最初のコード例を参照してください。

タブバーの背景は設定できますが、タブバーはタブペインの上のスペース全体を埋めるわけではありません。透けて見えるのはコンテナ（または親ウィジェット）です。その領域の色を制御するには、をに入れ、QTabWidgetスタイルQWidgetシートをコンテナーに設定します。以下の 2 番目のコード例を参照してください。

タブの展開:

#include <QtGui>

// Sets the style sheet of the QTabWidget to expand the tabs.
static void expandingTabsStyleSheet(QTabWidget *tw)
{
    tw->setStyleSheet(QString("QTabBar::tab { width: %1px; } ")
                      .arg(tw->size().width()/tw->count()));
}

// On resize events, reapply the expanding tabs style sheet
class ResizeFilter : public QObject
{
    QTabWidget *target;
public:
    ResizeFilter(QTabWidget *target) : QObject(target), target(target) {}

    bool eventFilter(QObject *object, QEvent *event)
    {
        if (event->type() == QEvent::Resize)
            expandingTabsStyleSheet(target);
        return false;
    }
};


int main(int argc, char * argv[])
{
  QApplication app(argc, argv);

  QTabWidget *tw = new QTabWidget;
  tw->installEventFilter(new ResizeFilter(tw));
  tw->addTab(new QWidget, "Tab1");
  tw->addTab(new QWidget, "Tab2");
  tw->addTab(new QWidget, "Tab3");

  tw->show();

  return app.exec();
}

タブの横の背景:

#include <QtGui>

int main(int argc, char * argv[])
{
  QApplication app(argc, argv);

  QWidget *container = new QWidget;
  container->setStyleSheet("background: qlineargradient( x1: 0, y1: 0, x2: 1, y2
: 0, stop: 0 black, stop: 1 blue);");

  QHBoxLayout *layout = new QHBoxLayout(container);
  layout->setContentsMargins(0, 0, 0, 0);

  QTabWidget *tw = new QTabWidget(container);
  layout->addWidget(tw);
  tw->setStyleSheet(
      "QTabBar::tab { background: gray; color: white; padding: 10px; } "
      "QTabBar::tab:selected { background: lightgray; } "
      "QTabWidget::pane { border: 0; } "
      "QWidget { background: lightgray; } ");
  tw->addTab(new QWidget, "Tab1");
  tw->addTab(new QWidget, "Tab2");
  tw->addTab(new QWidget, "Tab3");

  container->show();

  return app.exec();
}

score 3 · Accepted Answer

私が見ているように、やりたいことに応じて、2 つのオプションがあります。

背景を色で塗りつぶすには:

タブウィジェットのその部分の透明性を利用します。

QWidget *bg = new QWidget( parent );
bg->setAutoFillBackground( true );
QPalette bg_palette = bg->palette();
bg_palette.setColor( QPalette::Window, QColor( "orange" ) );
bg->setPalette( bg_palette );

QHBoxLayout layout = new QHBoxLayout();
layout->setMargin( 0, 0, 0, 0 );
layout->setSpacing( 0 );
bg->setLayout( layout );

QTabWidget *tab_widget = new QTabWidget();
// set up tab_widget however you want...
layout->addWidget( tab_widget );

これにより、bg ウィジェットはすべてオレンジ色になりますが、ほとんどのタブウィジェットが bg ウィジェットの上に描画されるため、タブウィジェットが描画されないオレンジ色のみが表示されます。

タブを展開するには:

これは実際よりも簡単だと思いましたが、基本的に QTabWidget をサブクラス化して、使用するタブバーウィジェットにアクセスする必要があります。

class ExpandableTabWidget : public QTabWidget
{
    Q_OBJECT;
    Q_PROPERTY( bool expanding_tabs READ Expanding WRITE SetExpanding );

public:
    ExpandableTabWidget( QWidget *parent = NULL ) : QTabWidget( parent )
    {
    }

    bool Expanding() const
    {
        return tabBar()->expanding();
    }

    void SetTabsExpanding( bool expanding = true )
    {
        tabBar()->setExpanding( expanding );
    }
};

次に、ExpandableTabWidgetクラスをプラグインにしてデザイナで使用するか、タブウィジェットをタイプに昇格させExpandableTabWidget、コードで拡張値を設定する必要があります。プロモーションを行うことを選択した場合、デザイナーで必要な結果は表示されませんが、プログラムを実行すると表示されます。

score 2 · Accepted Answer

qt 4.5 には、documentModeと呼ばれる、タブウィジェットのレンダリングを制御する新しいプロパティがあります。tabWidget->setDocumentMode(true)スタイルシートを使用して QTabBar の背景色を呼び出して設定するだけです。

Qt ドキュメントから:

このプロパティは、タブウィジェットがドキュメントページに適したモードでレンダリングされるかどうかを保持します。これは、Mac OS X のドキュメントモードと同じです。

このプロパティが設定されている場合、タブウィジェットフレームはレンダリングされません。このモードは、ページがタブウィジェット領域の大部分を占めるドキュメントタイプのページを表示する場合に便利です。

score 0 · Accepted Answer

私はしばらく前に同じ問題を抱えていました。「大きな」トップボーダーを作成し、タブバーをマージンで移動することで実現しました

qt - Qt: QTabWidget のスタイリング

4 に答える 4

Related

Reference