如何在 Qt 中制作可展开/可折叠的部分小部件
Posted
技术标签:
【中文标题】如何在 Qt 中制作可展开/可折叠的部分小部件【英文标题】：How to make an expandable/collapsable section widget in Qt 【发布时间】：2015-12-05 05:07:18 【问题描述】：我想在 Qt 中创建一个具有以下功能的自定义小部件：
它是一个容器 它可以填充任何 Qt 布局 它可以在任何 Qt 布局中 按钮允许垂直折叠/折叠内容，因此只有按钮可见，所有包含的布局都是不可见的。 上一个按钮允许将其再次展开/展开到布局内容的大小。 展开/折叠基于尺寸（不显示/隐藏）以允许动画。 可在 QDesigner 中使用提供一个想法，这是一个类似小部件（不是 Qt）的图像：
我已经有一个可以正常工作并在 QDesigner 中公开的框架。我现在需要让它扩展/折叠，这似乎并不那么简单。
我尝试使用 resize()、sizePolicy()、sizeHint() 但这不起作用： 当框架折叠时，我得到以下值：
sizeHint: (500,20)
size : (500,20)
closestAcceptableSize: (518,150)
Painted size: (518, 150)
QLayout::closestAcceptableSize 不是小部件的一部分，所以我无法更改它。
有任何提示或/和代码 sn-p 来实现吗？
编辑： 这里举一个简单的例子。除必要外，我删除了所有内容。
main.cpp 示例
#include <QWidget>
#include <QPushButton>
#include <QVBoxLayout>
#include "section.hpp"
using namespace myWidgets;
int main(int argc, char *argv[])
QApplication a(argc, argv);
// Create the main Window
QWidget window;
window.resize(500,500);
window.setStyleSheet("QPushButton:background-color:rgba(128,128,128,192);");
// Create the main window layout
QVBoxLayout topLayout(&window);
QWidget *w1 = new QWidget();
w1->setStyleSheet("background-color:rgba(128,128,128,192);");
topLayout.addWidget(w1);
Section section(&window);
topLayout.addWidget(§ion);
QVBoxLayout inLayout(§ion);
QPushButton *button = new QPushButton();
button->setMinimumHeight(100);
inLayout.addWidget(button);
QWidget *w2 = new QWidget();
w2->setStyleSheet("background-color:rgba(128,128,128,192);");
topLayout.addWidget(w2);
window.show();
return a.exec();
Section.hpp
#ifndef SECTION_HPP
#define SECTION_HPP
#include <QPushButton> //for the expand/collapse button
#include <QtDesigner/QDesignerExportWidget>
#include <QLayout>
#include <QPainter>
#include <QPaintEvent>
#include <QDebug>
// Compatibility for noexcept, not supported in vsc++
#ifdef _MSC_VER
#define noexcept throw()
#endif
#if defined SECTION_BUILD
#define SECTION_BUILD_DLL_SPEC Q_DECL_EXPORT
#elif defined SECTION_EXEC
#define SECTION_BUILD_DLL_SPEC
#else
#define SECTION_BUILD_DLL_SPEC Q_DECL_IMPORT
#endif
namespace myWidgets
class SECTION_BUILD_DLL_SPEC Section : public QWidget
Q_OBJECT
Q_PROPERTY( bool is_expanded MEMBER isExpanded)
public:
// Constructor, standard
explicit Section( QWidget *parent=0 ): QWidget(parent),
expandButton(this)
expandButton.resize(20,20);
expandButton.move(0,0);
expandButton.connect(&expandButton, &QPushButton::clicked,
this, &Section::expandCollapseEvent);
QMargins m= contentsMargins();
m.setTop(m.top()+25);
setContentsMargins(m);
//setSizePolicy(sizePolicy().horizontalPolicy(), QSizePolicy::Minimum);
virtual void expand( bool expanding ) noexcept
resize(sizeHint());
isExpanded = expanding;
updateGeometry();
qDebug() << (isExpanded? "expanded":"collapsed") << sizeHint() << QWidget::size() <<
parentWidget()->layout()->closestAcceptableSize(this, size());
virtual QSize sizeHint() const noexcept override
if (isExpanded) return QSize(layout()->contentsRect().width(),
layout()->contentsRect().height());
else return QSize(layout()->contentsRect().width(), 20);
// Implement custom appearance
virtual void paintEvent(QPaintEvent *e) noexcept override
(void) e; //TODO: remove
QPainter p(this);
p.setClipRect(e->rect());
p.setRenderHint(QPainter::Antialiasing );
p.fillRect(e->rect(), QColor(0,0,255,128));
protected:
// on click of the expandButton, collapse/expand this widget
virtual void expandCollapseEvent() noexcept
expand(!isExpanded);
bool isExpanded = true; //whenever the section is collapsed(false) or expanded(true)
QPushButton expandButton; //the expanding/collapsing button
;
#endif // SECTION_HPP
【问题讨论】：
【参考方案1】：我偶然发现了同样的问题，并通过将可折叠小部件实现为 QScrollArea 来解决它，其最大高度由 QPropertyAnimation 设置动画。
但由于我不使用 QDesigner，我无法告诉你它是否可以在那里工作。
我还有一个问题：可折叠小部件不仅可以向底部方向扩展，还可以向顶部和底部方向扩展。如果它们还没有达到最小高度，这可能会导致位于其上方的小部件收缩。但这与我们必须自己构建这个东西的事实相比，这确实是一个细节……
Spoiler.h
#include <QFrame>
#include <QGridLayout>
#include <QParallelAnimationGroup>
#include <QScrollArea>
#include <QToolButton>
#include <QWidget>
class Spoiler : public QWidget
Q_OBJECT
private:
QGridLayout mainLayout;
QToolButton toggleButton;
QFrame headerLine;
QParallelAnimationGroup toggleAnimation;
QScrollArea contentArea;
int animationDuration300;
public:
explicit Spoiler(const QString & title = "", const int animationDuration = 300, QWidget *parent = 0);
void setContentLayout(QLayout & contentLayout);
;
Spoiler.cpp
#include <QPropertyAnimation>
#include "Spoiler.h"
Spoiler::Spoiler(const QString & title, const int animationDuration, QWidget *parent) : QWidget(parent), animationDuration(animationDuration)
toggleButton.setStyleSheet("QToolButton border: none; ");
toggleButton.setToolButtonStyle(Qt::ToolButtonTextBesideIcon);
toggleButton.setArrowType(Qt::ArrowType::RightArrow);
toggleButton.setText(title);
toggleButton.setCheckable(true);
toggleButton.setChecked(false);
headerLine.setFrameShape(QFrame::HLine);
headerLine.setFrameShadow(QFrame::Sunken);
headerLine.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Maximum);
contentArea.setStyleSheet("QScrollArea background-color: white; border: none; ");
contentArea.setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
// start out collapsed
contentArea.setMaximumHeight(0);
contentArea.setMinimumHeight(0);
// let the entire widget grow and shrink with its content
toggleAnimation.addAnimation(new QPropertyAnimation(this, "minimumHeight"));
toggleAnimation.addAnimation(new QPropertyAnimation(this, "maximumHeight"));
toggleAnimation.addAnimation(new QPropertyAnimation(&contentArea, "maximumHeight"));
// don't waste space
mainLayout.setVerticalSpacing(0);
mainLayout.setContentsMargins(0, 0, 0, 0);
int row = 0;
mainLayout.addWidget(&toggleButton, row, 0, 1, 1, Qt::AlignLeft);
mainLayout.addWidget(&headerLine, row++, 2, 1, 1);
mainLayout.addWidget(&contentArea, row, 0, 1, 3);
setLayout(&mainLayout);
QObject::connect(&toggleButton, &QToolButton::clicked, [this](const bool checked)
toggleButton.setArrowType(checked ? Qt::ArrowType::DownArrow : Qt::ArrowType::RightArrow);
toggleAnimation.setDirection(checked ? QAbstractAnimation::Forward : QAbstractAnimation::Backward);
toggleAnimation.start();
);
void Spoiler::setContentLayout(QLayout & contentLayout)
delete contentArea.layout();
contentArea.setLayout(&contentLayout);
const auto collapsedHeight = sizeHint().height() - contentArea.maximumHeight();
auto contentHeight = contentLayout.sizeHint().height();
for (int i = 0; i < toggleAnimation.animationCount() - 1; ++i)
QPropertyAnimation * spoilerAnimation = static_cast<QPropertyAnimation *>(toggleAnimation.animationAt(i));
spoilerAnimation->setDuration(animationDuration);
spoilerAnimation->setStartValue(collapsedHeight);
spoilerAnimation->setEndValue(collapsedHeight + contentHeight);
QPropertyAnimation * contentAnimation = static_cast<QPropertyAnimation *>(toggleAnimation.animationAt(toggleAnimation.animationCount() - 1));
contentAnimation->setDuration(animationDuration);
contentAnimation->setStartValue(0);
contentAnimation->setEndValue(contentHeight);
如何使用：
…
auto * anyLayout = new QVBoxLayout();
anyLayout->addWidget(…);
…
Spoiler spoiler;
spoiler.setContentLayout(*anyLayout);
…
【讨论】：
我想在一些细节上分叉和修改您的解决方案。然后，我想将它添加到 github 或其他地方。你允许吗？我怎么能引用你，只是这个帖子的链接好吗？ 好的，继续吧:) @IceFire 使用此代码，在执行动画时强制父小部件更新其大小的最佳方法是什么？ 对于仍在参考此答案的任何人。我已将 clicked 信号切换为 toggled 信号，以允许在按钮外部切换展开/折叠。对我很有用，所以我可以实现全部展开/折叠所有功能。 不知道为什么评论消失了，但这里是 IceFire 的 repo 的链接：github.com/Elypson/qt-collapsible-section【参考方案2】：尽管这很旧，但我发现此线程很有帮助。但是，我正在使用 python，所以我必须转换 C++ 代码。 以防万一有人正在寻找 x squared 解决方案的 python 版本。这是我的港口：
from PyQt4 import QtCore, QtGui
class Spoiler(QtGui.QWidget):
def __init__(self, parent=None, title='', animationDuration=300):
"""
References:
# Adapted from c++ version
http://***.com/questions/32476006/how-to-make-an-expandable-collapsable-section-widget-in-qt
"""
super(Spoiler, self).__init__(parent=parent)
self.animationDuration = animationDuration
self.toggleAnimation = QtCore.QParallelAnimationGroup()
self.contentArea = QtGui.QScrollArea()
self.headerLine = QtGui.QFrame()
self.toggleButton = QtGui.QToolButton()
self.mainLayout = QtGui.QGridLayout()
toggleButton = self.toggleButton
toggleButton.setStyleSheet("QToolButton border: none; ")
toggleButton.setToolButtonStyle(QtCore.Qt.ToolButtonTextBesideIcon)
toggleButton.setArrowType(QtCore.Qt.RightArrow)
toggleButton.setText(str(title))
toggleButton.setCheckable(True)
toggleButton.setChecked(False)
headerLine = self.headerLine
headerLine.setFrameShape(QtGui.QFrame.HLine)
headerLine.setFrameShadow(QtGui.QFrame.Sunken)
headerLine.setSizePolicy(QtGui.QSizePolicy.Expanding, QtGui.QSizePolicy.Maximum)
self.contentArea.setStyleSheet("QScrollArea background-color: white; border: none; ")
self.contentArea.setSizePolicy(QtGui.QSizePolicy.Expanding, QtGui.QSizePolicy.Fixed)
# start out collapsed
self.contentArea.setMaximumHeight(0)
self.contentArea.setMinimumHeight(0)
# let the entire widget grow and shrink with its content
toggleAnimation = self.toggleAnimation
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self, b"minimumHeight"))
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self, b"maximumHeight"))
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self.contentArea, b"maximumHeight"))
# don't waste space
mainLayout = self.mainLayout
mainLayout.setVerticalSpacing(0)
mainLayout.setContentsMargins(0, 0, 0, 0)
row = 0
mainLayout.addWidget(self.toggleButton, row, 0, 1, 1, QtCore.Qt.AlignLeft)
mainLayout.addWidget(self.headerLine, row, 2, 1, 1)
row += 1
mainLayout.addWidget(self.contentArea, row, 0, 1, 3)
self.setLayout(self.mainLayout)
def start_animation(checked):
arrow_type = QtCore.Qt.DownArrow if checked else QtCore.Qt.RightArrow
direction = QtCore.QAbstractAnimation.Forward if checked else QtCore.QAbstractAnimation.Backward
toggleButton.setArrowType(arrow_type)
self.toggleAnimation.setDirection(direction)
self.toggleAnimation.start()
self.toggleButton.clicked.connect(start_animation)
def setContentLayout(self, contentLayout):
# Not sure if this is equivalent to self.contentArea.destroy()
self.contentArea.destroy()
self.contentArea.setLayout(contentLayout)
collapsedHeight = self.sizeHint().height() - self.contentArea.maximumHeight()
contentHeight = contentLayout.sizeHint().height()
for i in range(self.toggleAnimation.animationCount()-1):
spoilerAnimation = self.toggleAnimation.animationAt(i)
spoilerAnimation.setDuration(self.animationDuration)
spoilerAnimation.setStartValue(collapsedHeight)
spoilerAnimation.setEndValue(collapsedHeight + contentHeight)
contentAnimation = self.toggleAnimation.animationAt(self.toggleAnimation.animationCount() - 1)
contentAnimation.setDuration(self.animationDuration)
contentAnimation.setStartValue(0)
contentAnimation.setEndValue(contentHeight)
【讨论】：
就像我上面评论的那样：将 clicked 信号切换为 toggled 信号允许在按钮外部切换展开/折叠。对我很有用，所以我可以实现全部展开/折叠所有功能。【参考方案3】：我已经挖掘了@LoPiTal 提供的出色指针并将其转换为 PyQt5 (Python3)。我认为它非常优雅。
如果有人正在寻找 PyQt 解决方案，这是我的代码：
import sys
from PyQt5.QtWidgets import (QPushButton, QDialog, QTreeWidget,
QTreeWidgetItem, QVBoxLayout,
QHBoxLayout, QFrame, QLabel,
QApplication)
class SectionExpandButton(QPushButton):
"""a QPushbutton that can expand or collapse its section
"""
def __init__(self, item, text = "", parent = None):
super().__init__(text, parent)
self.section = item
self.clicked.connect(self.on_clicked)
def on_clicked(self):
"""toggle expand/collapse of section by clicking
"""
if self.section.isExpanded():
self.section.setExpanded(False)
else:
self.section.setExpanded(True)
class CollapsibleDialog(QDialog):
"""a dialog to which collapsible sections can be added;
subclass and reimplement define_sections() to define sections and
add them as (title, widget) tuples to self.sections
"""
def __init__(self):
super().__init__()
self.tree = QTreeWidget()
self.tree.setHeaderHidden(True)
layout = QVBoxLayout()
layout.addWidget(self.tree)
self.setLayout(layout)
self.tree.setIndentation(0)
self.sections = []
self.define_sections()
self.add_sections()
def add_sections(self):
"""adds a collapsible sections for every
(title, widget) tuple in self.sections
"""
for (title, widget) in self.sections:
button1 = self.add_button(title)
section1 = self.add_widget(button1, widget)
button1.addChild(section1)
def define_sections(self):
"""reimplement this to define all your sections
and add them as (title, widget) tuples to self.sections
"""
widget = QFrame(self.tree)
layout = QHBoxLayout(widget)
layout.addWidget(QLabel("Bla"))
layout.addWidget(QLabel("Blubb"))
title = "Section 1"
self.sections.append((title, widget))
def add_button(self, title):
"""creates a QTreeWidgetItem containing a button
to expand or collapse its section
"""
item = QTreeWidgetItem()
self.tree.addTopLevelItem(item)
self.tree.setItemWidget(item, 0, SectionExpandButton(item, text = title))
return item
def add_widget(self, button, widget):
"""creates a QWidgetItem containing the widget,
as child of the button-QWidgetItem
"""
section = QTreeWidgetItem(button)
section.setDisabled(True)
self.tree.setItemWidget(section, 0, widget)
return section
if __name__ == "__main__":
app = QApplication(sys.argv)
window = CollapsibleDialog()
window.show()
sys.exit(app.exec_())
【讨论】：
这个解决方案相当复杂，不会根据人们的要求真正推荐它。【参考方案4】：我知道这不是回答问题的好方法，只用一个链接，但我认为这篇博文非常相关：
http://www.fancyaddress.com/blog/qt-2/create-something-like-the-widget-box-as-in-the-qt-designer/
它基于 QTreeWidget，并使用了已经实现的展开/折叠功能。 它解释了如何将小部件添加到树小部件项目中，以及如何添加用于折叠/展开它们的按钮。
当然，所有功劳都归于帖子作者。
【讨论】：
非常优雅，非常感谢指点！我已将其转换为 PyQt5 并将代码添加为单独的答案。希望它最终对其他人有所帮助。 +1。我搜索了“qt-designer widget-box source”并找到了this link，它（假设它是真正的来源）表明 Widget Box 实际上是作为 QTreeView 实现的，类似于您链接的示例。 @Boon 是的，按照您的链接，您可以在小部件框here 后面找到树小部件的实际实现。将其与自定义 item delegate 结合使用，您可以隐藏默认的树小部件外观。全部采用 Qt 方式：D【参考方案5】：使用 PySide2 贡献一个版本（python3 的官方 Qt5 绑定）
from PySide2 import QtCore, QtGui, QtWidgets
class Expander(QtWidgets.QWidget):
def __init__(self, parent=None, title='', animationDuration=300):
"""
References:
# Adapted from PyQt4 version
https://***.com/a/37927256/386398
# Adapted from c++ version
https://***.com/a/37119983/386398
"""
super(Expander, self).__init__(parent=parent)
self.animationDuration = animationDuration
self.toggleAnimation = QtCore.QParallelAnimationGroup()
self.contentArea = QtWidgets.QScrollArea()
self.headerLine = QtWidgets.QFrame()
self.toggleButton = QtWidgets.QToolButton()
self.mainLayout = QtWidgets.QGridLayout()
toggleButton = self.toggleButton
toggleButton.setStyleSheet("QToolButton border: none; ")
toggleButton.setToolButtonStyle(QtCore.Qt.ToolButtonTextBesideIcon)
toggleButton.setArrowType(QtCore.Qt.RightArrow)
toggleButton.setText(str(title))
toggleButton.setCheckable(True)
toggleButton.setChecked(False)
headerLine = self.headerLine
headerLine.setFrameShape(QtWidgets.QFrame.HLine)
headerLine.setFrameShadow(QtWidgets.QFrame.Sunken)
headerLine.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Maximum)
self.contentArea.setStyleSheet("QScrollArea background-color: white; border: none; ")
self.contentArea.setSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Fixed)
# start out collapsed
self.contentArea.setMaximumHeight(0)
self.contentArea.setMinimumHeight(0)
# let the entire widget grow and shrink with its content
toggleAnimation = self.toggleAnimation
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self, b"minimumHeight"))
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self, b"maximumHeight"))
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self.contentArea, b"maximumHeight"))
# don't waste space
mainLayout = self.mainLayout
mainLayout.setVerticalSpacing(0)
mainLayout.setContentsMargins(0, 0, 0, 0)
row = 0
mainLayout.addWidget(self.toggleButton, row, 0, 1, 1, QtCore.Qt.AlignLeft)
mainLayout.addWidget(self.headerLine, row, 2, 1, 1)
row += 1
mainLayout.addWidget(self.contentArea, row, 0, 1, 3)
self.setLayout(self.mainLayout)
def start_animation(checked):
arrow_type = QtCore.Qt.DownArrow if checked else QtCore.Qt.RightArrow
direction = QtCore.QAbstractAnimation.Forward if checked else QtCore.QAbstractAnimation.Backward
toggleButton.setArrowType(arrow_type)
self.toggleAnimation.setDirection(direction)
self.toggleAnimation.start()
self.toggleButton.clicked.connect(start_animation)
def setContentLayout(self, contentLayout):
# Not sure if this is equivalent to self.contentArea.destroy()
self.contentArea.destroy()
self.contentArea.setLayout(contentLayout)
collapsedHeight = self.sizeHint().height() - self.contentArea.maximumHeight()
contentHeight = contentLayout.sizeHint().height()
for i in range(self.toggleAnimation.animationCount()-1):
expandAnimation = self.toggleAnimation.animationAt(i)
expandAnimation.setDuration(self.animationDuration)
expandAnimation.setStartValue(collapsedHeight)
expandAnimation.setEndValue(collapsedHeight + contentHeight)
contentAnimation = self.toggleAnimation.animationAt(self.toggleAnimation.animationCount() - 1)
contentAnimation.setDuration(self.animationDuration)
contentAnimation.setStartValue(0)
contentAnimation.setEndValue(contentHeight)
【讨论】：
【参考方案6】：我应用的解决方案是使用小部件的MaximumSize 属性来限制折叠时的高度。
最大的问题是要知道折叠时的展开高度以允许正确的动画步骤。这还没有解决，我目前使用固定高度步骤制作动画（我将其设置为与窗口预期高度相关的适当值）。
if (toBeFolded)
unfoldedMaxHeight = maximumHeight();
previousUnfoldedHeight = height();
setMaximumHeight(25);
else
// animate maximumHeight from 25 up to where the height do not change
// A hint of the final maximumHeight is the previousUnfoldedHeight.
// After animation, set maximumHeight back to unfoldedMaxHeight.
【讨论】：
不确定这是否符合您的上下文，我最终使用widget.setVisible(not widget.isVisible()) 而不是搞乱大小计算。【参考方案7】：
我构建了 Python3/Qt5 样式示例来测试我正在编写的 StyleSheet 类。 我还修复了未考虑扩展器按钮大小更改的大小计算问题。
我也把方法改成了setLayout()，和Qt保持一致。
import sys
import inspect
import textwrap
from collections import OrderedDict, UserString
from PyQt5 import QtCore, QtGui
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import *
class QStyleSheet(UserString):
"""
Represent stylesheets as dictionary key value pairs.
Update complex stylesheets easily modifying only the attributes you need
Allow for attribute inheritance or defaulting of stylesheets.
# TODO support [readOnly="true"] attribute-selectors
QTextEdit, QListView <-- you can have multiple classes.
QCheckBox::indicator <-- some psuedo classes have double colons
"""
def __init__(self, cls=None, name=None, psuedo=None, **styles):
"""
Arguments to the constructor allow you to default different properties of the CSS Class.
Any argument defined here will be global to this StyleSheet and cannot be overidden later.
:param cls: Default style prefix class to ``cls``
:param name: Default object name to ``name`` (hashtag) is not needed.
:param psuedo: Default psuedo class to ``psuedo``, example: ``:hover``
"""
self.cls_scope = cls
self.psuedo_scope = psuedo
self.name_scope = name
self._styles = OrderedDict() # we'll preserve the order of attributes given - python 3.6+
if styles:
self.setStylesDict(OrderedDict(styles))
def _ident(self, cls=None, name=None, psuedo=None):
# -- ensure value is of correct type ----------------------------------------
if cls is not None and not inspect.isclass(cls):
raise ValueError(f'cls must be None or a class object, got: type(cls)')
if name is not None and not isinstance(name, str):
raise ValueError(f'name must be None or a str, got: type(name)')
if psuedo is not None and not isinstance(psuedo, str):
raise ValueError(f'psuedo must be None or a str, got: type(psuedo)')
# -- ensure not overiding defaults -------------------------------------------
if cls is not None and self.cls_scope is not None:
raise ValueError(f'cls was set in __init__, you cannot override it')
if name is not None and self.name_scope is not None:
raise ValueError(f'name was set in __init__, you cannot override it')
if psuedo is not None and self.psuedo_scope is not None:
raise ValueError(f'psuedo was set in __init__, you cannot override it')
# -- apply defaults if set ---------------------------------------------------
if cls is None and self.cls_scope is not None:
cls = self.cls_scope
if name is None and self.name_scope is not None:
name = self.name_scope
if psuedo is None and self.psuedo_scope is not None:
psuedo = self.psuedo_scope
# return a tuple that can be used as a dictionary key.
ident = tuple([getattr(cls, '__name__', None), name or None, psuedo or None])
return ident
def _class_definition(self, ident):
"""Get the class definition string"""
cls, name, psuedo = ident
return '%s%s%s' % (cls or '', name or '', psuedo or '')
def _fix_underscores(self, styles):
return OrderedDict([(k.replace('_', '-'), v) for k,v in styles.items()])
def setStylesStr(self, styles):
"""
Parse styles from a string and set them on this object.
"""
raise NotImplementedError()
self._update()
def setStylesDict(self, styles, cls=None, name=None, psuedo=None):
"""
Set styles using a dictionary instead of keyword arguments
"""
styles = self._fix_underscores(styles)
if not isinstance(styles, dict):
raise ValueError(f'`styles` must be dict, got: type(styles)')
if not styles:
raise ValueError('`styles` cannot be empty')
ident = self._ident(cls, name, psuedo)
stored = self._styles.get(ident, OrderedDict())
stored.update(styles)
self._styles[ident] = stored
self._update()
def setStyles(self, cls=None, name=None, psuedo=None, **styles):
"""
Set or update styles according to the CSS Class definition provided by (cls, name, psuedo) using keyword-arguments.
Any css attribute with a hyphen ``-`` character should be changed to an underscore ``_`` when passed as a keyword argument.
Example::
Lets suppose we want to create the css class:
QFrame#BorderTest background-color: white; margin:4px; border:1px solid #a5a5a5; border-radius: 10px;
>>> stylesheet.setStyle(cls=QFrameBorderTest, background_color='white', margin='4px', border_radius='10px')
>>> print(stylesheet)
QFrame#BorderTest background-color: white; margin:4px; border:1px solid #a5a5a5; border-radius: 10px;
"""
styles = OrderedDict(styles)
self.setStylesDict(styles=styles, cls=cls, name=name, psuedo=psuedo)
def getStyles(self, cls=None, name=None, psuedo=None):
"""
Return the dictionary representations of styles for the CSS Class definition provided by (cls, name, psuedo)
:returns: styles dict (keys with hyphens)
"""
ident = self._ident(cls, name, psuedo)
return self._styles.get(ident)
def getClassIdents(self):
"""Get all class identifier tuples"""
return list(self._styles.keys())
def getClassDefinitions(self):
"""Get all css class definitions, but not the css attributes/body"""
return [self._class_definition(ident) for ident in self.getClassIdents()]
def validate(self):
"""
Validate all the styles and attributes on this class
"""
raise NotImplementedError()
def merge(self, stylesheet, overwrite=True):
"""
Merge another QStyleSheet with this QStyleSheet.
The QStyleSheet passed as an argument will be left un-modified.
:param overwrite: if set to True the matching class definitions will be overwritten
with attributes and values from ``stylesheet``.
Otherwise, the css attributes will be updated from ``stylesheet``
:type overwrite: QStyleSheet
"""
for ident in stylesheet.getClassIdents():
styles = stylesheet.getStyles(ident)
cls, name, psuedo = ident
self.setStylesDict(styles, cls=cls, name=name, psuedo=psuedo)
self._update()
def clear(self, cls=None, name=None, psuedo=None):
"""
Clear styles matching the Class definition
The style dictionary cleared will be returned
None will be returned if nothing was cleared.
"""
ident = self._ident(cls, name, psuedo)
return self._styles.pop(ident, None)
def _update(self):
"""Update the internal string representation"""
stylesheet = []
for ident, styles in self._styles.items():
if not styles:
continue
css_cls = self._class_definition(ident)
css_cls = css_cls + ' ' if css_cls else ''
styles_str = '\n'.join([f'k: v;' for k, v in styles.items()])
styles_str = textwrap.indent(styles_str, ''.ljust(4))
stylesheet.append('%s\n%s\n' % (css_cls, styles_str))
self.data = '\n\n'.join(stylesheet)
class Expander(QWidget):
def __init__(self, parent=None, title=None, animationDuration=200):
super().__init__(parent=parent)
self.animationDuration = animationDuration
self.toggleAnimation = QtCore.QParallelAnimationGroup()
self.contentArea = QScrollArea()
self.headerLine = QFrame()
self.toggleButton = QToolButton()
self.mainLayout = QGridLayout()
toggleButton = self.toggleButton
self.toggleButtonQStyle = QStyleSheet(QToolButton, border='none')
toggleButton.setStyleSheet(str(self.toggleButtonQStyle))
toggleButton.setToolButtonStyle(QtCore.Qt.ToolButtonTextBesideIcon)
toggleButton.setArrowType(QtCore.Qt.RightArrow)
toggleButton.setText(title or '')
toggleButton.setCheckable(True)
toggleButton.setChecked(False)
toggleButton.setSizePolicy(QSizePolicy.Minimum, QSizePolicy.Minimum)
headerLine = self.headerLine
self.headerLineQStyle = QStyleSheet(QFrame)
headerLine.setFrameShape(QFrame.NoFrame) # see: https://doc.qt.io/archives/qt-4.8/qframe.html#Shape-enum
headerLine.setFrameShadow(QFrame.Plain) # see: https://doc.qt.io/archives/qt-4.8/qframe.html#Shape-enum
headerLine.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Maximum)
self.contentAreaQStyle = QStyleSheet(QScrollArea, border='none')
self.contentArea.setStyleSheet(str(self.contentAreaQStyle))
self.contentArea.setSizePolicy(QSizePolicy.Expanding, QSizePolicy.Fixed)
# start out collapsed
self.contentArea.setMaximumHeight(0)
self.contentArea.setMinimumHeight(0)
# let the entire widget grow and shrink with its content
toggleAnimation = self.toggleAnimation
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self, b"minimumHeight"))
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self, b"maximumHeight"))
toggleAnimation.addAnimation(QtCore.QPropertyAnimation(self.contentArea, b"maximumHeight"))
# don't waste space
mainLayout = self.mainLayout
mainLayout.setVerticalSpacing(0)
mainLayout.setContentsMargins(0, 0, 0, 0)
row = 0
mainLayout.addWidget(self.toggleButton, row, 0, 1, 1, QtCore.Qt.AlignLeft)
mainLayout.addWidget(self.headerLine, row, 2, 1, 1)
row += 1
mainLayout.addWidget(self.contentArea, row, 0, 1, 3)
super().setLayout(self.mainLayout)
def start_animation(checked):
arrow_type = QtCore.Qt.DownArrow if checked else QtCore.Qt.RightArrow
direction = QtCore.QAbstractAnimation.Forward if checked else QtCore.QAbstractAnimation.Backward
toggleButton.setArrowType(arrow_type)
self.toggleAnimation.setDirection(direction)
self.toggleAnimation.start()
self.toggleButton.clicked.connect(start_animation)
def setHeaderFrameStyles(self, styles):
self._setWidgetStyles(self.headerLine, self.headerLineQStyle, styles)
def setToggleButtonStyles(self, styles):
self._setWidgetStyles(self.toggleButton, self.toggleButtonQStyle, styles)
def setContentAreaStyles(self, styles):
self._setWidgetStyles(self.contentArea, self.contentAreaQStyle, styles)
def _setWidgetStyles(self, widget, qstylesheet, var):
if isinstance(var, QStyleSheet):
qstylesheet.merge(var)
widget.setStyleSheet(str(qstylesheet))
elif isinstance(var, dict):
qstylesheet.setStylesDict(var)
widget.setStyleSheet(str(qstylesheet))
elif isinstance(var, str):
widget.setStyleSheet(var)
else:
raise ValueError('invalid argument type: type(var)')
def setLayout(self, contentLayout):
"""
Set the layout container that you would like to expand/collapse.
This should be called after all styles are set.
"""
# Not sure if this is equivalent to self.contentArea.destroy()
self.contentArea.destroy()
self.contentArea.setLayout(contentLayout)
collapsedHeight = self.toggleButton.sizeHint().height()
contentHeight = contentLayout.sizeHint().height()
for i in range(self.toggleAnimation.animationCount()-1):
spoilerAnimation = self.toggleAnimation.animationAt(i)
spoilerAnimation.setDuration(self.animationDuration)
spoilerAnimation.setStartValue(collapsedHeight)
spoilerAnimation.setEndValue(collapsedHeight + contentHeight)
contentAnimation = self.toggleAnimation.animationAt(self.toggleAnimation.animationCount() - 1)
contentAnimation.setDuration(self.animationDuration)
contentAnimation.setStartValue(0)
contentAnimation.setEndValue(contentHeight)
class MainWindow(QMainWindow):
LIGHT_BLUE = '#148cc1'
MED_BLUE = '#0c6a94'
DARK_BLUE = '#0a3a6b'
PALE_SALMON = '#fd756d'
LIGHT_GREY = '#d2d5da'
SLATE = '#525863'
def __init__(self):
super().__init__()
self.WINDOW_STYLE = QStyleSheet(QMainWindow, background_color=self.SLATE)
self.WINDOW_STYLE = str(self.WINDOW_STYLE)
self.LABEL_STYLE = QStyleSheet(QLabel, color=self.DARK_BLUE, font_weight=400, font_size='9pt')
self.LABEL_STYLE = str(self.LABEL_STYLE)
# -- QPushButton stylesheet ---------------------
self.BUTTON_STYLE = s1 = QStyleSheet()
s1.setStyles(cls=QPushButton,
color='white',
font_weight=400,
border_style='solid',
padding='4px',
background_color=self.LIGHT_BLUE)
s1.setStyles(cls=QPushButton, psuedo=':pressed',
background_color=self.PALE_SALMON)
s1.setStyles(cls=QPushButton, psuedo=':focus-pressed',
background_color=self.PALE_SALMON)
s1.setStyles(cls=QPushButton, psuedo=':disabled',
background_color=self.LIGHT_GREY)
s1.setStyles(cls=QPushButton, psuedo=':checked',
background_color=self.PALE_SALMON)
s1.setStyles(cls=QPushButton, psuedo=':hover:!pressed:!checked',
background_color=self.MED_BLUE)
self.BUTTON_STYLE = str(self.BUTTON_STYLE)
self.BUTTON_GROUPBOX_STYLE = QStyleSheet(QGroupBox, border='none', font_weight='bold', color='white')
self.BUTTON_GROUPBOX_STYLE = str(self.BUTTON_GROUPBOX_STYLE)
self.TEXT_EDIT_STYLE = QStyleSheet(QTextEdit, color='white', border=f'1px solid self.LIGHT_BLUE', background_color=self.MED_BLUE)
self.TEXT_EDIT_STYLE = str(self.TEXT_EDIT_STYLE)
self.initUI()
def initUI(self):
contents_vbox = QVBoxLayout()
label_box = QHBoxLayout()
for text in ('hello', 'goodbye', 'adios'):
lbl = QLabel(text)
lbl.setStyleSheet(self.LABEL_STYLE)
lbl.setAlignment(Qt.AlignCenter)
label_box.addWidget(lbl)
button_group = QButtonGroup()
button_group.setExclusive(True)
button_group.buttonClicked.connect(self._button_clicked)
self.button_group = button_group
button_hbox = QHBoxLayout()
for _id, text in enumerate(('small', 'medium', 'large')):
btn = QPushButton(text)
btn.setCheckable(True)
btn.setStyleSheet(self.BUTTON_STYLE)
button_group.addButton(btn)
button_group.setId(btn, _id)
button_hbox.addWidget(btn)
button_group.buttons()[0].toggle()
text_area = QTextEdit()
text_area.setPlaceholderText('Type a greeting here')
text_area.setStyleSheet(self.TEXT_EDIT_STYLE)
contents_vbox.addLayout(label_box)
contents_vbox.addLayout(button_hbox)
contents_vbox.addWidget(text_area)
collapsible = Expander(self, 'Expander')
collapsible.setToggleButtonStyles('padding': '4px', 'background-color': 'white')
collapsible.setContentAreaStyles('background-color': 'white')
collapsible.setLayout(contents_vbox)
vbox = QVBoxLayout()
vbox.addWidget(collapsible)
vbox.setAlignment(Qt.AlignTop)
widget = QWidget()
widget.setLayout(vbox)
self.setCentralWidget(widget)
self.setGeometry(200, 200, 500, 400)
self.setWindowTitle('Expander')
self.setStyleSheet(self.WINDOW_STYLE)
self.show()
def _button_clicked(self, button):
"""
For the toggle behavior of a QButtonGroup to work you must
connect the clicked signal!
"""
print('button-active', self.button_group.id(button))
if __name__ == '__main__':
app = QApplication(sys.argv)
ex = MainWindow()
sys.exit(app.exec_())
【讨论】：
【参考方案8】：受@x squared 启发的Qt Designer 版本。要使用它，请提升一个 QToolButton 并为其指定一个 QFrame 以折叠内容。
折叠按钮.h：
#include <QToolButton>
#include <QApplication>
#include <QDebug>
#pragma once
class CollapseButton : public QToolButton
public:
CollapseButton(QWidget *parent) : QToolButton(parent), content_(nullptr)
setCheckable(true);
setStyleSheet("background:none");
setIconSize(QSize(8, 8));
setFont(QApplication::font());
connect(this, &QToolButton::toggled, [=](bool checked)
setArrowType(checked ? Qt::ArrowType::DownArrow : Qt::ArrowType::RightArrow);
content_ != nullptr && checked ? showContent() : hideContent();
);
void setText(const QString &text)
QToolButton::setText(" " + text);
void setContent(QWidget *content)
assert(content != nullptr);
content_ = content;
auto animation_ = new QPropertyAnimation(content_, "maximumHeight"); // QObject with auto delete
animation_->setStartValue(0);
animation_->setEasingCurve(QEasingCurve::InOutQuad);
animation_->setDuration(300);
animation_->setEndValue(content->geometry().height() + 10);
animator_.addAnimation(animation_);
if (!isChecked())
content->setMaximumHeight(0);
void hideContent()
animator_.setDirection(QAbstractAnimation::Backward);
animator_.start();
void showContent()
animator_.setDirection(QAbstractAnimation::Forward);
animator_.start();
private:
QWidget *content_;
QParallelAnimationGroup animator_;
;
在 mainwindow.cpp 中：
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
ui->setupUi(this);
ui->toolButton->setContent(ui->contentFrame);
【讨论】：
【参考方案9】：最初的问题是想在 Qt Designer 中使用小部件，所以这里是我制作的 @x squared 的 repo 的一个分支：https://github.com/seanngpack/qt-collapsible-section
它适用于 QT5，要使其适用于 Qt 设计器，您只需构建和安装 repo。
没有太多关于如何做到这一点的文档，所以我可能会在稍后发表一篇文章来描述这个过程。
【讨论】：
以上是关于如何在 Qt 中制作可展开/可折叠的部分小部件的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Mobile - 仅使可折叠小部件的某些部分处于活动状态
我在列中有几个扩展的小部件。首先我展开一个小部件。当我展开第二个时，第一个应该自动折叠
JQuery 移动面板小部件 - 打开可折叠列表会导致一旦展开超出页面高度，就会跳转到页面 div 的底部。为啥？