设置界面比较麻烦,里面的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);

}

最终效果图就是这样。