Как реализовать вертикальные вкладки в QT?

Question

Как реализовать вертикальные вкладки в QT?

3

Я пытаюсь реализовать вертикальные вкладки с горизонтальным текстом с QT, но я не могу найти подобный вариант в QTabWidget.

Кто-то в SO просил что-то подобное здесь, однако ответы содержат неработающие ссылки, и я сомневаюсь, что они представляют реальное решение.

Кто-нибудь смог это сделать?

Bub Espinja 29 май 2018, в 09:43

Источник

Теги:

c++

qt

qt5

qtabwidget

qtabbar

2 ответа

0

Поэтому мое решение исправить эту проблему моделирования:

Код:

apptabbar.h

#ifndef APPTABBAR_H
#define APPTABBAR_H

#include <QTabBar>
#include <QStylePainter>
#include <QStyleOptionTab>

class AppTabBar : public QTabBar
{
public:
    AppTabBar();
    AppTabBar(int tabWidth, int tabHeight);
    AppTabBar(QSize tabSize);
    AppTabBar(QWidget *parent);
    AppTabBar(QWidget *parent, int tabWidth, int tabHeight);
    AppTabBar(QWidget *parent, QSize tabSize);
    QSize tabSizeHint(int index) const override;
    ~AppTabBar();

protected:
    void paintEvent(QPaintEvent *event) override;

private:
    int width, height;
};

#endif // APPTABBAR_H

apptabbar.cpp

#include "apptabbar.h"

AppTabBar::AppTabBar() : QTabBar(),
width(30),
height(115)
{

}

AppTabBar::AppTabBar(int tabWidth, int tabHeight) : QTabBar(),
width(tabWidth),
height(tabHeight)
{

}

AppTabBar::AppTabBar(QSize tabSize) : QTabBar(),
width(tabSize.width()),
height(tabSize.height())
{

}

AppTabBar::AppTabBar(QWidget *parent) : QTabBar(parent),
width(30),
height(115)
{

}

AppTabBar::AppTabBar(QWidget *parent, int tabWidth, int tabHeight) : QTabBar(parent),
width(tabWidth),
height(tabHeight)
{

}

AppTabBar::AppTabBar(QWidget *parent, QSize tabSize) : QTabBar(parent),
width(tabSize.width()),
height(tabSize.height())
{

}

AppTabBar::~AppTabBar()
{

}

QSize AppTabBar::tabSizeHint(int index) const
{
    QSize s = QTabBar::tabSizeHint(index);
    s.setWidth(width);
    s.setHeight(height);
    s.transpose();
    return s;
}

void AppTabBar::paintEvent(QPaintEvent *event)
{
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < this->count(); i++) {
        initStyleOption(&opt, i);
        painter.drawControl(QStyle::CE_TabBarTabShape, opt);
        painter.save();

        QSize s = opt.rect.size();
        s.transpose();
        QRect r(QPoint(), s);
        r.moveCenter(opt.rect.center());
        opt.rect = r;

        QPoint c = tabRect(i).center();
        painter.translate(c);
        painter.rotate(90);
        painter.translate(-c);
        painter.drawControl(QStyle::CE_TabBarTabLabel, opt);
        painter.restore();
    }

    QWidget::paintEvent(event);
}

apptabcontrol.h

#ifndef APPTABCONTROL_H
#define APPTABCONTROL_H

#include <QTabWidget>
#include <QTabBar>
#include <QPalette>
#include <QPainter>
#include <QDebug>
#include "apptabbar.h"

class AppTabControl : public QTabWidget
{
public:
    AppTabControl();
    AppTabControl(QWidget *parent);
    AppTabControl(QWidget *parent, int width, int height);
    AppTabControl(QWidget *parent, QSize size);
    void setTabControlSize(int width, int height);
    void setTabControlSize(QSize tabSize);
    ~AppTabControl();

private:
    int tabWidth, tabHeight;
    QSize tabSize;
};

#endif // APPTABCONTROL_H

apptabcontrol.cpp

#include "apptabcontrol.h"

AppTabControl::AppTabControl()
{

}

AppTabControl::AppTabControl(QWidget *parent) : QTabWidget(parent)
{
    this->setTabBar(new AppTabBar(parent, tabWidth, tabHeight));
    this->setTabPosition(QTabWidget::West);
}

AppTabControl::AppTabControl(QWidget *parent, int width, int height) : QTabWidget(parent),
tabWidth(width),
tabHeight(height)
{
    this->setTabBar(new AppTabBar(parent, tabWidth, tabHeight));
    this->setTabPosition(QTabWidget::West);
}

AppTabControl::AppTabControl(QWidget *parent, QSize size) : QTabWidget(parent),
tabSize(size)
{
    this->setTabBar(new AppTabBar(parent, tabSize));
    this->setTabPosition(QTabWidget::West);
}

void AppTabControl::setTabControlSize(int width, int height)
{
    tabWidth = width;
    tabHeight = height;
}

void AppTabControl::setTabControlSize(QSize size)
{
    tabSize = size;
}

AppTabControl::~AppTabControl()
{

}

И вот заключительная часть:

Test::Test(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Test)
{
    AppTabControl *tabControl = new AppTabControl(this, 30, 115);
    this->setStyleSheet("QTabBar::tab {color: #000000; font-weight: bold; font-size: 10px; font-family: Gotham, Helvetica Neue, Helvetica, Arial, sans-serif;} "
   "QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} "
   "QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}");
    AppTabBar *tabBar1 = new AppTabBar(tabControl);
    AppTabBar *tabBar2 = new AppTabBar(tabControl);
    AppTabBar *tabBar3 = new AppTabBar(tabControl);
    tabControl->addTab(tabBar1, "Tab1");
    tabControl->addTab(tabBar2, "Tab2");
    tabControl->addTab(tabBar3, "Tab3")
}

Результат:

Сейчас все работает хорошо.

Cobra91151 06 авг. 2018, в 08:07

Ещё вопросы

eyllanesc · Accepted Answer · 2018-05-29T09-38-00.000Z

7

Лучший ответ

Вы должны реализовать пользовательский QTabBar перезаписывающий tabSizeHint() и paintEvent() как показано ниже:

#include <QApplication>
#include <QStyleOptionTab>
#include <QStylePainter>
#include <QTabBar>
#include <QTabWidget>

class TabBar: public QTabBar{
public:
    QSize tabSizeHint(int index) const{
        QSize s = QTabBar::tabSizeHint(index);
        s.transpose();
        return s;
    }
protected:
    void paintEvent(QPaintEvent * /*event*/){
        QStylePainter painter(this);
        QStyleOptionTab opt;

        for(int i = 0;i < count();i++)
        {
            initStyleOption(&opt,i);
            painter.drawControl(QStyle::CE_TabBarTabShape, opt);
            painter.save();

            QSize s = opt.rect.size();
            s.transpose();
            QRect r(QPoint(), s);
            r.moveCenter(opt.rect.center());
            opt.rect = r;

            QPoint c = tabRect(i).center();
            painter.translate(c);
            painter.rotate(90);
            painter.translate(-c);
            painter.drawControl(QStyle::CE_TabBarTabLabel,opt);
            painter.restore();
        }
    }
};

class TabWidget : public QTabWidget
{
public:
    TabWidget(QWidget *parent=0):QTabWidget(parent){
        setTabBar(new TabBar);
        setTabPosition(QTabWidget::West);
    }
};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    TabWidget w;
    w.addTab(new QWidget, "tab1");
    w.addTab(new QWidget, "tab2");
    w.addTab(new QWidget, "tab3");
    w.show();

    return a.exec();
}

eyllanesc 29 май 2018, в 09:38

0

Здравствуй! Я попробовал ваш код и получил: ibb.co/dVuuYd Затем я добавил this->setStyleSheet("QTabBar::tab {width: 115px; height: 30px; color: #000000; font-weight: bold; font-size: 10px;"); чтобы сделать его больше. Я получаю текст по вертикали: ibb.co/gJqMeJ Как установить размер вкладки, чтобы текст был горизонтальным? Благодарю.
Cobra91151 22 июль 2018, в 19:16
0

@ Cobra91151 используйте "QTabBar::tab {height: 115px; width: 30px; color: #000000; font-weight: bold; font-size: 10px;}"
eyllanesc 22 июль 2018, в 19:21
0

Да, я понял. Я изменил код this->setStyleSheet("QTabBar::tab {height: 115px; width: 30px; color: #000000; font-weight: bold; font-size: 10px;}"); но теперь я получаю: ibb.co/nGZWwy
Cobra91151 22 июль 2018, в 19:35
0

Я исправил это, изменив: QTabBar::paintEvent(event); в QWidget::paintEvent(event); после кода метода paintEvent . Теперь это работает: ibb.co/j8rN3d Спасибо.
Cobra91151 22 июль 2018, в 19:38
0

Это был мой код, смешанный с вашим. Теперь проблема решена. Спасибо.
Cobra91151 22 июль 2018, в 19:45
0

Мне интересно узнать о последовательности перевода / вращения / перевода во время paintEvent . Я получаю вращение, но зачем двигаться и двигаться назад?
Jon Harper 23 июль 2018, в 23:28
0

@JonHarper, когда вы поворачиваете то, что вы делаете, относительно источника, по этой причине я перемещаюсь в центр прямоугольника, сломанную вещь, но затем мне нужно нарисовать его из исходного источника, так как это ожидает функцию drawControl, я рекомендую что вы экспериментируете, устраняя эту линию.
eyllanesc 23 июль 2018, в 23:30
0

Оооо. Моя декартова математика нуждалась в обновлении. Спасибо.
Jon Harper 23 июль 2018, в 23:33
0

@JonHarper LOL, это немного скучная и скучная математика :)
eyllanesc 23 июль 2018, в 23:34
0

Здравствуй! Это работает хорошо, но когда я применил эту таблицу стилей: "QTabBar::tab:selected {background-color: #FA9944; color: #000000; border-top: 1px solid #FA9944;} QTabBar::tab:hover {color: #000000; border-top: 1px solid #FA9944; background-color: #FFFFFF;}" Images: ibb.co/ezSb6K ibb.co/jstutz Он неправильно оформляет вкладки. Должен ли я переопределить события прессы и парения? Какие-либо предложения? Благодарю.
Cobra91151 05 авг. 2018, в 11:00
0

@ Cobra91151 вы можете разместить изображение лучшего качества, чтобы понять вас
eyllanesc 05 авг. 2018, в 11:54
0

Хорошо. Скриншоты: ibb.co/jeZ1qe ibb.co/c5HbOz
Cobra91151 05 авг. 2018, в 12:19
0

@ Cobra91151 Не могли бы вы сказать мне, что неудобства, с одними изображениями я не мог понять это.
eyllanesc 05 авг. 2018, в 12:21
0

Проблема в том, что при выборе или наведении вкладка рисует только некоторую часть вкладки, а не всю вкладку.
Cobra91151 05 авг. 2018, в 12:22
0

Я создал gif-изображение проблемы: ddgobkiprc33d.cloudfront.net/… Есть идеи, как это исправить? Благодарю.
Cobra91151 05 авг. 2018, в 20:42
0

Я исправил проблему. Я опубликую это в ответе.
Cobra91151 06 авг. 2018, в 07:28
0

@ Cobra91151 Единственное отличие, которое я вижу, это: QWidget::paintEvent(event); С другой стороны, мой оригинальный код не вызывает у меня проблем, какой стиль вы используете?
eyllanesc 06 авг. 2018, в 07:52
0

@eyllanesc На самом деле разница заключается в методе tabSizeHint который устанавливает размер вкладок. Ваш код работает только для размера по умолчанию.
Cobra91151 06 авг. 2018, в 07:57
0

@ Cobra91151 ммм, я ожидал более чистого решения, реализация его из C ++ делает менее гибким qss.
eyllanesc 06 авг. 2018, в 08:00
0

@eyllanesc Кстати, ваше решение работает только для позиции вкладки QTabWidget::West . Если вы хотите положение вкладки QTabWidget::East вы должны изменить painter.rotate(270); в противном случае текст будет перевернут. В моем проекте я сохранил позицию и добавил дополнительную проверку в метод paintEvent .
Cobra91151 06 авг. 2018, в 08:51
0

@ Cobra91151, да, потому что от меня требовался ОП, и то, как ты видишь его изменение, просто. :)
eyllanesc 06 авг. 2018, в 08:59

Показать ещё 19 комментариев