当前位置：首页 > news >正文

Qt控件圆角

news 2026/5/12 2:17:33

使用Qt时候经常会给控件设置圆角，这里记录一下设置圆角的几种方式：

圆角的原理：

1.`qss设置四个圆角`

border-raduis属性设置控件的四个圆角
取值：水平半径垂直半径
均以px为单位，水平半径必须指定，垂直半径为可以选，如果只有一个值，则表示垂直半径与水平半径使用相同的值

示例：

border-radius:50px
border-radius:50px 20px

2.`qss单独设置一个圆角`

border-top-left-radius 设置左上角圆角;
border-top-right-radius 设置右上角圆角;
border-bottom-left-radius 设置左下角圆角;
border-bottom-right-radius 设置右下角圆角;
这几个属性的使用与border-radius一致，都是可以设置两个值，第一个表示水平半径，第二个表示垂直半[可选]

3.使用`paintEvent`绘制圆角

有时候我们自定义控件，重写了paintEvent函数，则可以直接使用QPainter来绘制圆角，绘制圆角矩形的函数原型为:
void drawRoundedRect(const QRect &rect, qreal xRadius, qreal yRadius, Qt::SizeMode mode = Qt::AbsoluteSize);
第一个参数指定要绘制的矩形区域
第二个参数表示圆角的水平半径
第三个参数表示圆角的垂直半径
第四个参数我暂时还没用过，后续查官方文档再补上

但是这个函数只能将控件的四个圆角全部都绘制出来，无法指定只绘制某一个圆角

如果只需要绘制一侧圆角，比如只绘制左上、右上的圆角，或者只绘制左上、左下圆角，这里提供一种思路可以是用圆角矩形和矩形区域叠加取并集的方式;

如下代码绘制的是左上，右上为圆角，但底部为直角的矩形(united表示取并集)

QRect titleRect=this->rect();// 绘制顶部圆角，底部直角的图形QPainterPath ph1,ph2;ph1.addRoundedRect(titleRect,radius,radius);ph2.addRect(titleRect.x(),titleRect.y()+radius,titleRect.width(),titleRect.height()-radius);painter->drawPath(ph1.united(ph2));

如果要绘制其他的圆角，也可以参考这种方式，关于交集、并集、差集的使用，可以参考这篇文章Qt绘制图形的交、并、补

如果需要完全自定义绘制圆角，可以使用绘制线段与绘制弧形的方式，完全实现自定义

voiddrawCustomRoundedRect(QPainter&painter,constQRectF&rect,qreal topLeftRadius,qreal topRightRadius,qreal bottomRightRadius,qreal bottomLeftRadius){QPainterPath path;// 移动到起始点path.moveTo(rect.left()+topLeftRadius,rect.top());// 上边线path.lineTo(rect.right()-topRightRadius,rect.top());// 右上圆角if(topRightRadius>0){path.arcTo(rect.right()-topRightRadius*2,rect.top(),topRightRadius*2,topRightRadius*2,90,-90);}// 右边线path.lineTo(rect.right(),rect.bottom()-bottomRightRadius);// 右下圆角if(bottomRightRadius>0){path.arcTo(rect.right()-bottomRightRadius*2,rect.bottom()-bottomRightRadius*2,bottomRightRadius*2,bottomRightRadius*2,0,-90);}// 下边线path.lineTo(rect.left()+bottomLeftRadius,rect.bottom());// 左下圆角if(bottomLeftRadius>0){path.arcTo(rect.left(),rect.bottom()-bottomLeftRadius*2,bottomLeftRadius*2,bottomLeftRadius*2,270,-90);}// 左边线path.lineTo(rect.left(),rect.top()+topLeftRadius);// 左上圆角if(topLeftRadius>0){path.arcTo(rect.left(),rect.top(),topLeftRadius*2,topLeftRadius*2,180,-90);}painter.drawPath(path);}