选项卡关闭按钮位置

Question

我想在我的Qt应用程序中将选项卡设置为以下样式： 我使用了以下样式表：

QTabBar{background-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;

}

结果如下（关闭按钮的位置不是我想要的）： 我做错了什么，怎样才能得到我想要的结果？

- warunanc

---

设置关闭按钮的padding-right不起作用吗？顺便说一句，那是一个很漂亮的选项卡栏。 - Anthony

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

增加选项卡栏的 margin-right 怎么样？ - Anthony

这也没有成功，因为关闭按钮不是选项卡本身的子控件，而是选项卡栏的子控件。有可能移动关闭按钮的位置吗？我尝试了很多方法，包括填充、边距、边框设置等，但仍然看不到它移动。 - warunanc

Answer 1

编辑：我知道这篇文章有些旧，但我希望它能对其他人有所帮助。

经过几次测试，我认为有一种方法可以实现这个功能，但不使用Qt样式表：

1. 子类化你的QTabWidget以完全访问受保护的特性
2. 创建你自己的QWidget或QPushButton作为关闭按钮
3. 通过样式表属性（例如margin-right）管理你的按钮位置
4. 将你的按钮添加到选项卡中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)。

- Kévin Renella

---

感谢您对答案的回复，正如您所见，英语不是我的母语，因此非常感谢您的编辑。 - Kévin Renella

Answer 2

添加自定义按钮是一个不错的答案。但是如果您使用边距来决定关闭按钮的位置，关闭按钮的鼠标区域将会异常。因此，我在小部件中添加了一个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);
}

- Michael

Answer 3

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

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

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

使用 "margin-right" 属性来控制标签右侧的距离；

- NanLv

---

有趣，我会尝试并回复。 - warunanc

不行，它不起作用了，当我进一步增加边距（6像素）时，关闭按钮开始缩小，而不是从选项卡的右侧向左移动。 - warunanc

Answer 4

您的填充方式有误

顶部

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

按钮

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

- Джон Смит

Answer 5

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

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

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

- arag