QTabWidget的QTabBar位于左侧且横向

参考这篇文章:

(1条消息) QTabWidget 竖向 QTabBar横向_qtabwidget竖向表头_Harbin Kakashi的博客-CSDN博客

(这里纯纯记录学习一下,建议大家跳转到链接处学习) 

(ps:后来发现可以使用QListWidget和QStackedWidget组合使用来达到类似的效果。)

 先使用 tab->setTabPosition(QTabWidget::West);

调整QTabBar位置到左边

目标效果:                                                                       原始效果:

主要就是使用自定义样式重置QTabBar的样式

tab->tabBar()->setStyle(new CustomTabStyle);

类的继承关系:QStyle--->QCommonStyle--->QProxyStyle--->CustomTabStyle

里面有两个函数:

(1)函数决定控件大小。

QSize sizeFromContents(ContentsType type, const QStyleOption *option, const QSize &contentsSize, const QWidget *widget = Q_NULLPTR) const

1.1:翻转控件的宽和高

    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
        const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab) {
            s.transpose();//transpose:互换位置
        }
        return s;
    }

 1.2自定义控件大小

    QSize sizeFromContents(ContentsType type, const QStyleOption *option,
        const QSize &size, const QWidget *widget) const
    {
        QSize s = QProxyStyle::sizeFromContents(type, option, size, widget);
        if (type == QStyle::CT_TabBarTab) {
//            s.transpose();//transpose:互换位置
            s.rwidth() = 150; // 设置每个tabBar中item的大小
            s.rheight() = 50;
        }
        return s;
    }

 

 (2)自绘控件

void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget = Q_NULLPTR) const

你可以自己使用QPainter绘制出自己的风格。

他依此画出被选中时,悬浮时,平时三种状态下的方框。

    void drawControl(ControlElement element, const QStyleOption *option, QPainter *painter, const QWidget *widget) const
    {
        if (element == CE_TabBarTabLabel) {
            if (const QStyleOptionTab *tab = qstyleoption_cast<const QStyleOptionTab *>(option)) {
                QRect allRect = tab->rect;
                allRect.setWidth(allRect.width() - 5);
                allRect.setHeight(allRect.height() - 2);
                //选中状态
                if (tab->state & QStyle::State_Selected) {
                    //save用以保存坐标,restore用来退出状态
                    painter->save();
                    painter->setBrush(QBrush(0x004ea1));
                    //带有弧线矩形
                    painter->drawRoundedRect(tab->rect, 8, 8);
                    painter->restore();
                }
                //hover状态
                else if(tab->state & QStyle::State_MouseOver){
                    painter->save();
                    painter->setBrush(QBrush(0x004ea1));
                    painter->drawRoundedRect(allRect, 8, 8);
                    painter->restore();
                }
                else{
                    painter->save();
                    painter->setBrush(QBrush(0x78aadc));
                    painter->drawRoundedRect(allRect, 8, 8);
                    painter->restore();
                }
                painter->save();
                QTextOption option;//option:选择
                option.setAlignment(Qt::AlignCenter);
                painter->setFont(QFont("楷体", 18, QFont::Bold));
                painter->setPen(0xffffff);
                painter->drawText(allRect, tab->text, option);
                painter->restore();
                return;
            }
        }
        if (element == CE_TabBarTab) {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }

感想:

1.感觉到Qt框架的厉害之处,有很多需要学习的地方。

2.感谢博主的分享。

Qt的`QTabWidget`中,如果你想要将`QTabBar`的方向设置为水平显示文本,你可以通过设置样式表(QSS)来实现。对于左右两侧布局,你需要改变`QTabBar`的`direction`属性,以及调整其内部标签的排列方式。以下是使用CSS(Qt Quick Style Sheets)的方式: 首先,确保你的QSS文件中包含了`QTabBar`的相关样式。例如,在`.qss`文件中添加以下内容: ```css /* 指定QTabBar的CSS */ .QTabBar { direction: left-to-right; /* 设置从左到右的文字方向 */ text-align: center; /* 确保标签居中显示 */ } /* 如果需要,可以针对鼠标悬停状态更改样式 */ .QTabBar::tab:hover { background-color: lightgray; } /* 可选:自定义每个标签的样式 */ .QTabBar::tab:selected { color: black; background-color: white; } ``` 然后,在你的C++代码中,你可以这样加载这个样式表: ```cpp #include <QApplication> #include <QMainWindow> #include <QTabWidget> #include <QFile> int main(int argc, char *argv[]) { QApplication app(argc, argv); // 加载QSS样式 QFile styleSheet("path_to_your_stylesheet.qss"); if (styleSheet.open(QFile::ReadOnly)) { QTextStream stream(&stylesheet); app.setStyleSheet(stream.readAll()); } QMainWindow window; QTabWidget *tabWidget = new QTabWidget(window); tabWidget->setStyleSheet(""); // 清除默认样式,以防冲突 // ... 其他窗口和tabWidget配置 ... window.show(); return app.exec(); } ``` 这里假设`"path_to_your_stylesheet.qss"`是你保存QSS文件的路径。注意,如果`QTabBar`原本默认是在底部,你需要通过`setTabBarLocation(Qt::Left)`来将其移动到左边。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lpl还在学习的路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值