QTabWidet设置不同Position,tabBar文字均水平显示

设置QTabWidget在不同方向上的文字均水平显示。有两种方法,如下:

1、设置不同Position,tabBar文字均水平显示

QTabWidget设置在设置Position为East或者West时,文字方向默认会从下到上显示。先通过以下方法实现tabBar更改方向,但文字始终垂直显示。

方法1:通过继承QTabWidget来实现

用到函数:

void setTabButton(int index,ButtonPosition position,QWidget *widget);//给tabBar添加控件

QWidget *tabButton(int index,ButtonPosition) const;                             //获取tab上添加的控件

 

tabWidget头文件

#ifndef TABWIDGET_H
#define TABWIDGET_H
#include<QTableWidget>
#include<QLabel>
class tabWidget : public QTabWidget
{
    Q_OBJECT
public:
    explicit tabWidget(QWidget *parent = nullptr);

    void updateselect();                          //用来设置一开始选中的状态
    int addTab(QWidget *widget, const QString &); //重载(不是虚函数)

signals:

public slots:
    void slotSetLabelColor(int color);            //自定义槽(响应tabBar点击事件)
};

#endif // TABWIDGET_H

tabWidget cpp文件

#include "tabwidget.h"


tabWidget::tabWidget(QWidget *parent) : QTabWidget(parent)
{

    connect(this,SIGNAL(tabBarClicked(int)),this,SLOT(slotSetLabelColor(int)));

}

void tabWidget::slotSetLabelColor(int index)
{
    for(int i=0;i<this->count();i++)
    {
        this->tabBar()->tabButton(i,QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);");
    }
    this->tabBar()->tabButton(index,QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);color:white;");

}

int tabWidget::addTab(QWidget *widget, const QString &label)
{
    int nRetrun=QTabWidget::addTab(widget,"");
    int count=this->count()-1;
    QLabel *labelTab=new QLabel(label,this);
    QFont ft;
    ft.setPointSize(20);
    labelTab->setFont(ft);
    labelTab->setAlignment(Qt::AlignCenter);
    this->tabBar()->setTabButton(count,QTabBar::ButtonPosition::RightSide,labelTab);
    this->tabBar()->tabButton(count,QTabBar::ButtonPosition::RightSide)->setFixedHeight(64);
    updateselect();
    return nRetrun;

}

void tabWidget::updateselect()
{
    for(int i=0;i<this->currentIndex();i++)
    {
        this->tabBar()->tabButton(i,QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);color:black;");
    }
    this->tabBar()->tabButton(this->currentIndex(),QTabBar::ButtonPosition::RightSide)->setStyleSheet("background-color:rgba(0,0,0,0);color:white;");

}

mainWindow  cpp

#pragma execution_character_set("utf-8")
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include"tabwidget.h"
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    tabWidget *m_tab=new tabWidget(this);
    QWidget *b1=new QWidget();
    QWidget *b2=new QWidget();

    m_tab->setGeometry(0,0,500,400);
    m_tab->setStyleSheet("QTabBar::tab{min-width:140px;max-width:140px;min-height:64px;max-height:64px;padding:0;}"
                     "QTabBar::tab:selected{background:#025bc7}");
    //设置tabwidget位置  更改位置
    m_tab->setTabPosition(QTabWidget::TabPosition::South);
    
    if((m_tab->tabPosition()==QTabWidget::TabPosition::South)||
            (m_tab->tabPosition()==QTabWidget::TabPosition::North))
        m_tab->setLayoutDirection(Qt::LeftToRight);//LeftToRight
    else//东西方向的layoutDirection
    {
         m_tab->setLayoutDirection(Qt::RightToLeft);//RightToLeft
    }
    m_tab->addTab(b1,"one");
    m_tab->addTab(b2,"two");
}

MainWindow::~MainWindow()
{
    delete ui;
}

参考博客:https://blog.csdn.net/skyztttt/article/details/52448992 

方法2: 重绘代码

#ifndef CUSTOMTABSTYLE_H
#define CUSTOMTABSTYLE_H
#include <QPainter>
#include <QProxyStyle>
#include <QStyleOptionTab>
#include <QRect>
#include <QSize>
class CustomTabStyle : public QProxyStyle
{
public:
    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();
            s.rwidth() = 150; // 设置每个tabBar中item的大小
            s.rheight() = 50;
        }
        return s;
    }
    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->drawRect(allRect.adjusted(0, 0, 0, 0));
                    //带有弧线矩形
                    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();
                }
                QTextOption option;
                option.setAlignment(Qt::AlignCenter);
                painter->setFont(QFont("楷体", 18, QFont::Bold));
                painter->setPen(0xffffff);
                painter->drawText(allRect, tab->text, option);
                return;
            }
        }
        if (element == CE_TabBarTab) {
            QProxyStyle::drawControl(element, option, painter, widget);
        }
    }
};
tab->tabBar()->setStyle(new CustomTabStyle);//注意,设置上述代码风格 就可以实现QTabBar横向

此方法更适合已经存在的QTabWidget编辑好tab里面的内容。

注意:

1.如果east和west时候,显示不完,出现...,需要设置elidemode为ElideNone。

2.不能通过样式表设置QTabBar::tab的样式。

参考博客:https://blog.csdn.net/wojiaoanchao/article/details/78911891 

 3.分享一套代码,如下图:

代码链接:https://download.csdn.net/download/weixin_41882459/12774054

### 回答1: 这个问题的意思是关于如何设置QTabWidget选项卡的字体方向(即从左到右或从右到左)。 要设置QTabWidget选项卡的字体方向,可以使用QTabWidget的`setTabPosition()`方法。通过传递Qt枚举值`QTabWidget.east`或`QTabWidget.west`作为参数,可以设置选项卡的字体方向为从左到右或从右到左。 例如,要将选项卡的字体方向设置为从右到左,可以使用以下代码: ``` myTabWidget = QTabWidget() myTabWidget.setTabPosition(QTabWidget.west) ``` 这将把选项卡从左移动到右,并将字体方向设置为从右到左。 ### 回答2: QTabWidget是一个常用的Qt控件,用于创建具有选项卡的用户界面。默认情况下,QTabWidget中的选项卡标签(Tab文字水平方向显示,但是如果需要在其它方向显示,也是可以实现的。 实现QTabWidget的Tab字体方向可以通过设置StyleSheet来实现,StyleSheet是Qt提供的一个设置控件样式的强大机制。样式表中可以设置多种控件属性,包括Tab字体方向。StyleSheet实现Tab字体方向的代码如下: ```cpp QTabWidget::tab-bar { alignment: center; } QTabBar::tab { width: 100px; height: 40px; font-size:16px; text-align:center; } QTabWidget::pane { border: 1px solid #262626; } QTabWidget::tab-bar:left { left:70px; font-size:16px; transform:rotate(90deg) ; transform-origin:left top; } QTabWidget::tab-bar:right { right:70px; font-size:16px; transform:rotate(-90deg) ; transform-origin:right top; } QTabWidget::tab-bar:top { top:70px; font-size:16px; } QTabWidget::tab-bar:bottom { bottom:70px; font-size:16px; } ``` 以上代码实现了将QTabWidget的Tab标签文字变为垂直方向显示的效果。其中,`transform:rotate()`函数是用来进行旋转变换的,`transform-origin`则是指定旋转的基准点。其他的属性设置则是为了使界面更加美观和合理。 这里只提供了一种实现方式,实际上还有多种方式可以实现Tab字体方向。开发者可以根据自己的实际需求来选择最合适的方式进行实现。 ### 回答3: QTabWidget是Qt库中的一种常用控件,可用于创建具有选项卡的界面。在QTabWidget中,选项卡通常由一个标题和一个小图标组成,用于切换不同的子界面。对于选项卡的标题文本,也就是tab字体方向,QTabWidget提供了多种设置选择,如下所示: 1.设置字体方向 可以使用setFont()方法来设置字体方向。常用的字体方向包括:从左到右、从右到左、竖直方向(从上到下或从下到上)等。如果需要将所有选项卡的字体方向设置为竖直方向,可以使用以下代码: ```cpp QFont font = tabWidget->font(); font.setPointSize(14); //设置字体大小 font.setFamily("微软雅黑"); //设置字体样式 font.setWeight(QFont::Normal); //设置字体粗细 QTabBar *tabbar = tabWidget->tabBar(); //获取QTabBar对象 tabbar->setFont(font); //设置所有选项卡的字体方向 tabbar->setTabRotation(Qt::Vertical); //设置字体方向为竖直方向 ``` 2.设置选项卡文字对齐方式 可以使用setTabTextAlignment()方法来设置选项卡文字的对齐方式。常用的对齐方式包括:左对齐、居中、右对齐等。如果需要将所有选项卡的文字对齐方式设置为居中,则可以使用以下代码: ```cpp tabbar->setTabTextAlignment(Qt::AlignCenter); //设置所有选项卡的文字对齐方式为居中 ``` 3.设置选项卡图标与文字的位置 可以使用setTabIcon()方法来设置选项卡图标的位置。常用的图标位置包括:左侧、右侧、上方、下方等。如果需要将所有选项卡的图标位置设置为右侧,则可以使用以下代码: ```cpp tabbar->setTabIcon(0, QIcon(":/icon.png")); //设置第一个选项卡的图标 tabbar->setIconSize(QSize(32, 32)); //设置图标大小 tabbar->setTabIconPlacement(QTabBar::RightSide); //设置所有选项卡图标的位置为右侧 ``` 总之,通过上述方法可以轻松设置QTabWidget选项卡的字体方向、文字对齐方式和图标位置等属性,使得界面更加美观和实用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

fyzy

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

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

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

打赏作者

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

抵扣说明:

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

余额充值