QT: estilo Qtabwidget

Question

Estou usando o QT e tenho uma configuração QtabWidget no QT Designer Editor, você pode vê -lo na figura 1.

Como você pode ver após o tab4, há um espaço vazio até a borda direita, de alguma maneira eu preciso preencher esse espaço com uma cor, como na figura 2 (a melhor coisa seria poder definir uma cor desbotada) . Ou outra solução seria que as guias flutuam para cobrir a tela inteira.

Eu uso a seguinte folha de estilo agora:

QTabWidget::tab-bar {

 }

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

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

Existe uma maneira de definir a cor de fundo do QTABBAR usando folhas de estilo QT? Ou posso colocar as guias flutuando até a borda usando folhas de estilo QT?

EDIT: Eu tenho tentado a solução que Caleb Huitt - Cjhuitt sugeriu abaixo. Eu realmente gosto da ideia de fazer as guias se expandir, mas não consigo funcionar.

No QT Designer Editor, clique com o botão direito do mouse no meu qtabwidget-> "Promova para ..." e escolha "Nome da classe base": Qtabwidget "Nome da classe promovido": ExpandableTabwidget e depois clico em Adicionar e promover.

No método init do widget que segura meu qtabwidget que eu defino

ui.tabWidget->SetTabsExpanding(true);

Tudo está construindo bem, mas o Qtabbar não se expande.

Estou fazendo algo errado?

Obrigado!

Answer 1

As abas expandindo e colorindo o fundo podem ser realizadas usando folhas de estilo.

Para as guias em expansão, uma folha de estilo pode ser aplicada às guias que definem sua largura para uma fração da largura total do QTabWidget. Como a folha de estilo precisará ser atualizada após o redimensionamento, ela é aplicada usando um filtro de eventos. Veja o primeiro exemplo de código abaixo.

Embora o plano de fundo da barra de guias possa ser definido, a barra de guia não preenche todo o espaço acima do painel da guia. É o contêiner (ou widget pai) que está sendo exibido. Para controlar a coloração dessa área, coloque o QTabWidget em um QWidget e defina a folha de estilo no recipiente. Veja o segundo exemplo de código abaixo.

Guias expandindo:

#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();
}

Fundo ao lado de guias:

#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();
}

Answer 2

Eu vejo, você tem duas opções, dependendo do que você quer fazer.

Para preencher o fundo com cor:

Aproveite a transparência dessa parte do widget da guia.

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 );

Isso faz com que o widget BG seja laranja, mas como a maior parte do widget da guia atrairá o widget BG, você verá apenas a laranja onde o widget da guia não desenha.

Para fazer as guias se expandir:

Eu pensei que isso seria mais fácil do que é, mas você basicamente precisa subclasse o QTabWidget para obter acesso ao widget da barra de guias que ele usa.

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 );
    }
};

Você então precisaria fazer o seu ExpandableTabWidget classe em um plug -in e use -o no designer, ou você pode promover seu widget de guia para ser do tipo ExpandableTabWidget e defina o valor em expansão no código. Se você optar por fazer a promoção, não verá os resultados desejados no designer, mas você executará quando executar seu programa.

Answer 3

No Qt 4.5, há uma nova propriedade que controla a renderização do widget de guia, chamado DocumentMode. Apenas ligue tabWidget->setDocumentMode(true) e defina a cor de fundo do qtabbar usando as folhas de estilo.

Da documentação do QT:

Essa propriedade mantém se o widget da guia é ou não renderizado em um modo adequado para páginas de documentos. É o mesmo que o modo de documento no Mac OS X.

Quando esta propriedade é definida, o quadro do widget da guia não é renderizado. Este modo é útil para mostrar páginas do tipo documentos em que a página cobre a maior parte da área do widget da guia.

Answer 4

Eu tive o mesmo problema há algum tempo. Consegui isso fazendo a borda superior "grande" e a barra de guias em movimento com margem