大佬教程收集整理的这篇文章主要介绍了Qt 圆角按钮，面版自动布局，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
一、前言
在部分界面开发中，有时需要动态添加控件或按钮到面板中，在不需要时又需要删除该控件，故模仿视频开发中的设置屏蔽词，通过自己绘制的按钮与排布面板控件实现。
实现效果如下：
说明：
1、输入框可设置背景色、圆角角度、颜色高亮等
2、采用圆角输入框输入字符，回车或点击“添加”可触发信号，获取输入字符串
3、字符以圆角按钮控件显示，点击“X”可删除该按钮
4、面版自动排布，删除中间的圆角按钮，后续的会往前移
5、添加的屏蔽词都放在后面，已有屏蔽词会提示已存在，删除屏蔽词后可再次添加
二、实现过程
1、运行环境Qt5.5 VS2013
2、制作圆角按钮
1）继承QWidget，封装KeyButton控件
@H_944_40@ 1 #ifndef KEYBUTTON @H_944_40@ 2 #define KEYBUTTON @H_944_40@ 3 @H_944_40@ 4 #include <QEvent> @H_944_40@ 5 #include <QWidget> @H_944_40@ 6 #include <QMouseEvent> @H_944_40@ 7 #include <QResizeEvent> @H_944_40@ 8 @H_944_40@ 9 class KeyButton : public QWidget @H_944_40@10 { @H_944_40@11 Q_OBjeCT @H_944_40@12 @H_944_40@13 public: @H_944_40@14 KeyButton(QWidget *parent = 0); @H_944_40@15 @H_944_40@16 public: @H_944_40@17 void setBorderColor(const QString &); @H_944_40@18 void setHoverColor(const QString &); @H_944_40@19 @H_944_40@20 void setText(const QString &); @H_944_40@21 QString getText(); @H_944_40@22 @H_944_40@23 signals: @H_944_40@24 void closeSig(); @H_944_40@25 @H_944_40@26 protected: @H_944_40@27 bool eventFilter(QObject *, QEvent *); @H_944_40@28 void paintEvent(QPaintEvent *event); @H_944_40@29 void leaveEvent(QEvent *); @H_944_40@30 void resizeEvent(QResizeEvent *); @H_944_40@31 void mouseReleaseEvent(QMouseEvent *E); @H_944_40@32 void mouseMoveEvent(QMouseEvent *E); @H_944_40@33 @H_944_40@34 private: @H_944_40@35 void drawIcon(QPainter *painter, const QRect &rect, int icon); @H_944_40@36 @H_944_40@37 private: @H_944_40@38 bool m_IsHover; @H_944_40@39 QString bgColor; //背景色 @H_944_40@40 QString borderColor; //边框颜色 @H_944_40@41 QString hoverColor; //高亮字体颜色 @H_944_40@42 QString text; //字体文本 @H_944_40@43 QString textColor; //文本正常颜色 @H_944_40@44 int padding; //左侧右侧间距 @H_944_40@45 int iconSize; //图标大小 @H_944_40@46 QRect rightRect; //右侧图标区域 @H_944_40@47 bool pressed; //鼠标是否按下 @H_944_40@48 QPoint lastPoint; //鼠标按下处的坐标 @H_944_40@49 @H_944_40@50 QPoint m_Point; @H_944_40@51 QPixmap m_Pixmap; @H_944_40@52 }; @H_944_40@53 @H_944_40@54 #endif // KEYBUTTON@H_801_308@
2）重写paintEvent事件，绘制按钮圆角按钮，包括字符
@H_262_322@
@H_944_40@ 1 void KeyButton::paintEvent(QPaintEvent *event) @H_944_40@ 2 { @H_944_40@ 3 QPainter painter(this); @H_944_40@ 4 painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing); @H_944_40@ 5 @H_944_40@ 6 //绘制背景+边框 @H_944_40@ 7 painter.setPen(borderColor); @H_944_40@ 8 painter.setBrush(QColor(bgColor)); @H_944_40@ 9 int min = qMin(this->rect().width(), this->rect().height()); @H_944_40@10 int radius = min / 2; @H_944_40@11 //画圆角矩形 @H_944_40@12 QPainterPath path; @H_944_40@13 QRect rect = this->rect(); @H_944_40@14 path.moveTo(rect.bottomRight() - QPointF(0, radius)); @H_944_40@15 path.lineTo(rect.topRight() + QPointF(0, radius)); @H_944_40@16 path.arcTo(QRectF(QPointF(rect.topRight() - QPointF(radius * 2, 0)), QSize(radius * 2, radius *2)), 0, 90); @H_944_40@17 path.lineTo(rect.topLeft() + QPointF(radius, 0)); @H_944_40@18 path.arcTo(QRectF(QPointF(rect.topLeft()), QSize(radius * 2, radius * 2)), 90, 90); @H_944_40@19 path.lineTo(rect.bottomLeft() - QPointF(0, radius)); @H_944_40@20 path.arcTo(QRectF(QPointF(rect.bottomLeft() - QPointF(0, radius * 2)), QSize(radius * 2, radius * 2)), 180, 90); @H_944_40@21 path.lineTo(rect.bottomLeft() + QPointF(radius, 0)); @H_944_40@22 path.arcTo(QRectF(QPointF(rect.bottomRight() - QPointF(radius * 2, radius * 2)), QSize(radius * 2, radius * 2)), 270, 90); @H_944_40@23 painter.drawPath(path); @H_944_40@24 @H_944_40@25 QFont font = qApp->font(); @H_944_40@26 font.setPixelSize(12); @H_944_40@27 painter.setFont(font); @H_944_40@28 @H_944_40@29 //绘制文字 @H_944_40@30 if (!text.isEmpty()) @H_944_40@31 { @H_944_40@32 if(m_IsHover) @H_944_40@33 painter.setPen(hoverColor); @H_944_40@34 else @H_944_40@35 painter.setPen(textColor); @H_944_40@36 QRect textRect(padding * 1.5, 0, this->width(), this->height()); @H_944_40@37 painter.drawText(textRect, Qt::AlignLeft | Qt::AlignVCenter, text); @H_944_40@38 } @H_944_40@39 //绘制右侧图标 @H_944_40@40 font.setPixelSize(15); @H_944_40@41 painter.setFont(font); @H_944_40@42 painter.drawText(rightRect, Qt::AlignHCenter | Qt::AlignVCenter, "X"); @H_944_40@43 }@H_801_308@
3）继承resizeEvent事件，计算“X”的绘制位置
@H_944_40@1 void KeyButton::resizeEvent(QResizeEvent *) @H_944_40@2 { @H_944_40@3 //重新计算图标位置区域 @H_944_40@4 int height = this->height() / 2 - m_Pixmap.height() / 2; @H_944_40@5 m_Point = QPoint(this->width() - (iconSize * 1) - padding, height); @H_944_40@6 rightRect = QRect(this->width() - (iconSize * 1) - padding, 0, iconSize, this->height()); @H_944_40@7 }@H_801_308@
4）继承mouseReleaseEvent事件，用户点击“X”后触发删除信号
@H_944_40@1 void KeyButton::mouseReleaseEvent(QMouseEvent *E) @H_944_40@2 { @H_944_40@3 pressed = true; @H_944_40@4 lastPoint = e->pos(); @H_944_40@5 this->update(); @H_944_40@6 @H_944_40@7 if (rightRect.contains(lastPoint)) @H_944_40@8 emit closeSig(); @H_944_40@9 }@H_801_308@
3、面板自动布局
1）继承QWidget，自定义PanelWidget控件
@H_944_40@ 1 #ifndef PANEL_WIDGET_H @H_944_40@ 2 #define PANEL_WIDGET_H @H_944_40@ 3 @H_944_40@ 4 #include <QWidget> @H_944_40@ 5 @H_944_40@ 6 class QScrollArea; @H_944_40@ 7 class QFrame; @H_944_40@ 8 class QVBoxLayout; @H_944_40@ 9 class QGridLayout; @H_944_40@10 class QSpacerItem; @H_944_40@11 @H_944_40@12 class PanelWidget : public QWidget @H_944_40@13 { @H_944_40@14 Q_OBjeCT @H_944_40@15 public: @H_944_40@16 explicit PanelWidget(QWidget *parent = 0); @H_944_40@17 @H_944_40@18 protected: @H_944_40@19 void resizeEvent(QResizeEvent *); @H_944_40@20 void showEvent(QShowEvent *event); @H_944_40@21 @H_944_40@22 public: @H_944_40@23 QSize sizeHint() const; @H_944_40@24 QSize minimumSizeHint() const; @H_944_40@25 @H_944_40@26 void setWidgets(QList<QWidget *> widgets); @H_944_40@27 void setWidget(QWidget *widget); @H_944_40@28 void delWidget(QWidget *widget); @H_944_40@29 void set@R_197_8620@nCount(int n@R_197_8620@n); @H_944_40@30 void setMargin(int left, int top, int right, int bottom); @H_944_40@31 void setMargin(int margin); @H_944_40@32 void setSpacing(int spacE); @H_944_40@33 void resetLayout(); @H_944_40@34 @H_944_40@35 private: @H_944_40@36 void initFrom(); @H_944_40@37 void hideWidget(); @H_944_40@38 void showPanel(); @H_944_40@39 @H_944_40@40 private: @H_944_40@41 QList<QWidget *> m_widgets; @H_944_40@42 int m_n@R_197_8620@n{ 0 }; @H_944_40@43 @H_944_40@44 private: @H_944_40@45 QScrollArea *scrollArea; @H_944_40@46 QWidget *scrollAreaWidgetContents; @H_944_40@47 QFrame *frame; @H_944_40@48 QVBoxLayout *verticalLayout; @H_944_40@49 QGridLayout *gridLayout; @H_944_40@50 @H_944_40@51 QSpacerItem *@H_507_42@m_HorizontalSpacer; @H_944_40@52 QSpacerItem *@H_507_42@m_VerticalSpacer; @H_944_40@53 @H_944_40@54 bool m_IsShow; @H_944_40@55 }; @H_944_40@56 @H_944_40@57 #endif // PANEL_WIDGET_H@H_801_308@
2）考虑增加的控件可能比较多，采用QScrollArea控件（存储不下时可左右拉动显示）
@H_944_40@ 1 void PanelWidget::initFrom() @H_944_40@ 2 { @H_944_40@ 3 scrollArea = new QScrollArea(this); @H_944_40@ 4 scrollArea->setObjectName("scrollAreaMain"); @H_944_40@ 5 scrollArea->setWidgetResizable(true); @H_944_40@ 6 @H_944_40@ 7 scrollAreaWidgetContents = new QWidget(); @H_944_40@ 8 scrollAreaWidgetContents->setGeometry(QRect(0, 0, 100, 100)); @H_944_40@ 9 scrollAreaWidgetContents->setStyleSheet("border:none;"); @H_944_40@10 @H_944_40@11 verticalLayout = new QVBoxLayout(scrollAreaWidgetContents); @H_944_40@12 verticalLayout->setSpacing(0); @H_944_40@13 verticalLayout->setContentsmargins(0, 0, 0, 0); @H_944_40@14 @H_944_40@15 frame = new QFrame(scrollAreaWidgetContents); @H_944_40@16 frame->setObjectName("panelWidget"); @H_944_40@17 @H_944_40@18 gridLayout = new QGridLayout(framE); @H_944_40@19 gridLayout->setSpacing(6); @H_944_40@20 @H_944_40@21 verticalLayout->addWidget(framE); @H_944_40@22 scrollArea->setWidget(scrollAreaWidgetContents); @H_944_40@23 }@H_801_308@
3）通过setWidget和setWidgets，更新面板内的控件
@H_944_40@ 1 void PanelWidget::setWidgets(QList<QWidget *> widgets) @H_944_40@ 2 { @H_944_40@ 3 m_widgets = widgets; @H_944_40@ 4 //先清空原有所有元素 @H_944_40@ 5 QList<QWidget *> widgetList = frame->findChildren<QWidget *>(); @H_944_40@ 6 foreach(QWidget *w, widgetList) @H_944_40@ 7 w->hide(); @H_944_40@ 8 @H_944_40@ 9 resetLayout(); @H_944_40@10 } @H_944_40@11 @H_944_40@12 void PanelWidget::setWidget(QWidget *widget) @H_944_40@13 { @H_944_40@14 if (!@H_507_42@m_widgets.contains(widget)) @H_944_40@15 { @H_944_40@16 m_widgets << widget; @H_944_40@17 resetLayout(); @H_944_40@18 } @H_944_40@19 }@H_801_308@
4）更新面版内容后，通过QGridLayout更新控件的布局
@H_944_40@ 1 void PanelWidget::resetLayout() @H_944_40@ 2 { @H_944_40@ 3 int row = 0; @H_944_40@ 4 int @R_197_8620@n = 0; @H_944_40@ 5 int index = 0; @H_944_40@ 6 @H_944_40@ 7 for (QWidget *widget : m_widgets) @H_944_40@ 8 { @H_944_40@ 9 gridLayout->addWidget(widget, row, @R_197_8620@n); @H_944_40@10 widget->setVisible(true); @H_944_40@11 @R_197_8620@n++; @H_944_40@12 index++; @H_944_40@13 @H_944_40@14 if (index % m_n@R_197_8620@n == 0) { @H_944_40@15 row++; @H_944_40@16 @R_197_8620@n = 0; @H_944_40@17 } @H_944_40@18 } @H_944_40@19 if (NULL == m_HorizontalSpacer) @H_944_40@20 m_HorizontalSpacer = new QSpacerItem(1, 1, QSizePolicy::Expanding, QSizePolicy::Minimum); @H_944_40@21 if(1 == m_widgets.count()) @H_944_40@22 gridLayout->addItem(m_HorizontalSpacer, 0, m_n@R_197_8620@n); @H_944_40@23 row++; @H_944_40@24 if (NULL == m_VerticalSpacer) @H_944_40@25 m_VerticalSpacer = new QSpacerItem(1, 1, QSizePolicy::Minimum, QSizePolicy::Expanding); @H_944_40@26 gridLayout->addItem(m_VerticalSpacer, row, 0); @H_944_40@27 }@H_801_308@
以上是大佬教程为你收集整理的Qt 圆角按钮，面版自动布局全部内容，希望文章能够帮你解决Qt 圆角按钮，面版自动布局所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
