设置界面比较麻烦,里面的QCheckBox和QRadioButton的效果无法通过QSS实现,需要重写,里面的漏斗形图形需要比较多步骤去绘制。
重写QCheckBox
void paintEvent(QPaintEvent *event) override
{
QCheckBox::paintEvent(event);
QPainter painter(this);
// 绘制复选框
QStyleOptionButton opt;
initStyleOption(&opt);
QRect checkBoxRect = style()->subElementRect(QStyle::SE_CheckBoxIndicator, &opt, this);
painter.setRenderHint(QPainter::Antialiasing);
if (isChecked())
{
// 绘制选中时的圆角背景
painter.setBrush(QColor("#BB9F5E")); // 设置选中时的背景颜色
painter.setPen(Qt::NoPen); // 去除边框
}
else
{
// 绘制未选中时的圆角边框
painter.setBrush(Qt::NoBrush); // 不填充背景
painter.setPen(QPen(QColor("#8C8C8C"), 2)); // 使用灰色边框,线宽为2
}
// 绘制圆角矩形,圆角半径为3
painter.drawRoundedRect(checkBoxRect.adjusted(1, 1, -1, -1), 3, 3);
// 如果复选框被选中,绘制白色的勾
if (isChecked())
{
painter.setPen(QPen(Qt::white, 2)); // 设置勾的颜色为白色,线宽为2
// 使用 QPainterPath 绘制勾的形状
QPainterPath checkMarkPath;
checkMarkPath.moveTo(checkBoxRect.left() + checkBoxRect.width() * 0.3, checkBoxRect.center().y());
checkMarkPath.lineTo(checkBoxRect.center().x()-2, checkBoxRect.bottom() - checkBoxRect.height() * 0.3);
checkMarkPath.lineTo(checkBoxRect.right() - checkBoxRect.width() * 0.3, checkBoxRect.top() + checkBoxRect.height() * 0.35);
painter.drawPath(checkMarkPath); // 绘制勾
}
}
重写QRadioButton
void paintEvent(QPaintEvent* event) override
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
QStyleOptionButton option;
initStyleOption(&option);
painter.save();
// 获取单选框的矩形区域
QRect radioButtonRect = style()->subElementRect(QStyle::SE_RadioButtonIndicator, &option, this);
// 增大单选框的尺寸
int enlargedSize = 24; // 自定义单选框的大小(增大后的大小)
radioButtonRect.setWidth(enlargedSize);
radioButtonRect.setHeight(enlargedSize);
painter.setBrush(Qt::NoBrush); // 不填充背景
painter.setPen(QPen(QColor("#8C8C8C"), 2)); // 使用灰色边框,线宽为2
// 绘制增大的圆形的单选框
QRect circleRect = radioButtonRect.adjusted(2, 2, -2, -2); // 调整绘制圆形的位置
painter.drawEllipse(circleRect);
// 如果当前单选框被选中,则填充中心
if (isChecked())
{
painter.setPen(QPen(QColor("#BB9F5E"), 2));
painter.drawEllipse(circleRect);
painter.setBrush(QColor("#BB9F5E")); // 设置选中时的填充颜色为白色
painter.drawEllipse(circleRect.adjusted(5,5, -5, -5)); // 绘制小圆圈,表示选中
}
// 绘制文本,确保文本位置对齐
QRect textRect = option.rect;
// 将文本左移,使其与增大的单选框右边对齐
textRect.setLeft(radioButtonRect.right() + 5); // 将文本移到单选框右侧
// 使文本垂直居中
textRect.moveTop(radioButtonRect.top() + (radioButtonRect.height() - textRect.height()) / 2);
painter.restore();
// 使用默认的文本颜色(由样式表和控件状态决定)
style()->drawItemText(&painter, textRect, Qt::AlignVCenter, option.palette, isEnabled(), option.text);
}
绘制设置框的线条和图形。
void Setting::paintEvent(QPaintEvent*event)
{
QPainter p(this);
QPen pen;
QPainterPath path;
pen.setColor(QColor("#CFCFCF"));//CFCFCF
pen.setWidth(2);
p.setPen(pen);
//画顶部线条
int x = ui->labelSetting->pos().x();
int y = ui->labelSetting->pos().y()+ui->labelSetting->height()+10;
p.drawLine(x,y,x+this->width()-40,y);
//画圆弧
int aw = 20;
int endx = x+this->width()-35;
int endy = y;
int cx = endx-aw;
int cy = endy-aw;
int tx = cx-aw;
int ty = cy-aw;
//int bx = cx+aw;
int by = cy+aw;
int startAngle = 270;
int spanAngle = 80;
double rr = aw;
int cx1 = tx+aw;
int cy1 = ty+aw;
double ex1 = cx1 + rr * cos((startAngle + spanAngle) * 3.14 / 180);
double ey1 = cy1 - rr * sin((startAngle + spanAngle) * 3.14 / 180);
startAngle = 90;
spanAngle = -80;
int cx2 = tx+aw;
int cy2 = by+aw;
double ex2 = cx2 + rr * cos((startAngle + spanAngle) * 3.14 / 180);
double ey2 = cy2 - rr * sin((startAngle + spanAngle) * 3.14 / 180);
p.setBrush(QColor("#333333"));
p.setPen(Qt::white);
path.moveTo(cx,by);
path.lineTo(ex1,ey1);
path.lineTo(ex2,ey2);
path.lineTo(cx,by);
p.drawPath(path);
path.clear();
path.moveTo(cx,by);
QRect r (tx,ty,aw*2,aw*2); //x,y,width,height
QRect r2(tx,by,aw*2,aw*2);
pen.setWidth(1);
p.setPen(pen);
p.setRenderHint(QPainter::Antialiasing);
path.arcTo(r,270,80);
path.moveTo(cx,by);
path.arcTo(r2,90,-80);
p.fillPath(path,Qt::white);
//画顶部线条
pen.setColor(QColor("#464646"));
pen.setWidth(2);
p.setPen(pen);
p.drawLine(x+this->width()-35,0,x+this->width()-35,this->height());
//画右边线条
int s1x = ui->btnCancel->pos().x();
int s1y = ui->btnCancel->pos().y()-20;
int s2x = ui->btnOk->pos().x()+ui->btnOk->width();
pen.setColor(QColor("#CBCBCB"));
pen.setWidthF(1.5);
p.setPen(pen);
p.drawLine(s1x,s1y,s2x,s1y);
//画右下角三角形
QPoint p1(x+this->width()-35,this->height()-10);
QPoint p2(x+this->width()-35,this->height());
QPoint p3(x+this->width()-45,this->height());
QPolygon cons;
cons< p.setPen(Qt::black); p.drawPolygon(cons); } 最终效果图就是这样。