选项卡关闭按钮位置

Posted 2023-02-17

【中文标题】选项卡关闭按钮位置

【英文标题】：Tab close button position

【发布时间】：2012-10-30 10:29:14

【问题描述】：

我想在我的 Qt 应用程序中为我的标签设置如下样式：

我使用了以下样式表：

QTabBarbackground-color: #fff; border-top: 0px;
QTabBar::tab 
    border-image: url(:/New_UI/tab_inactive.png) 7 17 7 2;
    margin-left: 2px;
    border-right: 17px;
    border-top: 5px;
    border-bottom: 5px;
    font: 400 9.2pt "Segoe UI";
    color: #ccc;
    padding: 0px 13px 0px 5px;
    max-height: 26px;
 

QTabBar::tab:selected, QTabBar::tab:hover 
    border-image: url(:/New_UI/tab_active.png) 6 17 6 2;


QTabBar::close-button 
    image: url(:/New_UI/tab_close.png);
    subcontrol-origin: padding;
    subcontrol-position: right; 
    width: 13px;
    height: 13px;

结果如下（关闭按钮位置不是我想要的）：

我做错了什么&我怎么能得到我想要的结果？

【问题讨论】：

关闭按钮设置 padding-right 不起作用吗？顺便说一句，这是一个很好看的标签栏。

我尝试设置 padding-right，但是如果我将 10px 的值设置为右填充，由于某种原因它会减小关闭按钮的大小:(

增加标签栏的margin-right怎么样？

也没有运气，因为关闭按钮不是选项卡本身的子控件，而是选项卡栏的子控件，是否可以移动关闭按钮的位置，我尝试了很多东西，关于填充，边距，边框设置，我什至看不到它甚至移动

【参考方案1】：

编辑：我知道这篇文章很旧，但我希望它可以帮助其他人。

经过几次测试，我认为有一种方法可以做到这一点，但它不使用Qt style sheets：

子类化您的 QTabWidget 以完全访问受保护的功能 创建您自己的 QWidget 或 QPushButton 作为关闭按钮 使用样式表属性管理按钮的位置（例如margin-right） 将按钮添加到标签tabBar()->setTabButton(index, QTabBar::RightSide, closeButton);

我用于测试的代码：

MyTab::MyTab(QWidget *parent) : QTabWidget(parent)

/// Create your button
QPushButton *close = new QPushButton(this);

// Add a tab
addTab(new QWidget(), QIcon(), "Tab 1");
setStyleSheet("QTabBar::tab  width : 150px;");

// Size and move your button
close->setStyleSheet("max-height: 14px; max-width: 15px; margin-right: 50px;");

// Add your button to the tab
tabBar()->setTabButton(0, QTabBar::RightSide, close);

最后，在 MainWindow 中，我将自己的 TabWidget 添加到布局中：

ui->layout->addWidget(new MyTab(this));

结果：

但现在您必须通过连接按钮手动处理关闭操作并获取removeTab(index) 调用的索引。

【讨论】：

这正是我要找的，谢谢你的回答

欢迎您回答，正如您所见，英语不是我的母语，非常感谢您的编辑。

【参考方案2】：

我正在和你做同样的事情，这是我的样式表：

QTabBar::close-button
    image:url(:tabclose.png); 
    margin-right:4px;

不要使用“width”和“height”属性，这两个在这里不起作用，在子控件上设置“image:url()”会隐式设置子控件的宽度和高度（除非图像在 SVG 中）。

使用“margin-right”属性控制距标签右边缘的距离；

【讨论】：

有兴趣，我会尝试返回

不，它不起作用，当我进一步增加边距（6px）时，关闭按钮开始收缩，而不是从标签的右边缘向左移动

【参考方案3】：

添加自定义按钮是一个很好的答案。但是如果你使用边距来决定关闭按钮的位置，关闭按钮的鼠标区域会异常，所以我在一个小部件中添加了一个 SpacerItem 和按钮，最后将这个小部件添加到TabWidget。

void TabBarCloseable::tabInserted(int index)

    QWidget *widget = new QWidget(this);
    QHBoxLayout *layout = new QHBoxLayout(this);
    widget->setLayout(layout);

    QToolButton *closeBtn = new QToolButton(this);
    layout->addWidget(closeBtn);
    layout->insertSpacing(1, 15);
    closeBtn->setStyleSheet("max-height: 16px; max-width: 16px;");

    this->setTabButton(index, QTabBar::RightSide, widget);

    QTabBar::tabInserted(index);

【参考方案4】：

你有错误的填充

顶部

QTabBar::tab 
    min-width: 25ex;
    padding: 10px 50px 10px 10px;

按钮

QTabBar::tab 
    min-width: 25ex;
    padding: 10px 0px 10px 10px;

【参考方案5】：

这是一个纯样式表解决方案，无需手动创建按钮：

QTabBar::close-button 
    image: url(:/tab-close.png);
    padding-left: -13px;

如果查看 Qt 源代码，图像绘制代码仅使用填充值，而不使用边距值。