首页专栏详情
打赏
Qt自定义控件圆角
易百纳技术社区 小王子🤴 2020-09-23 23:07:37

Qt自定义控件圆角

Qt中绘制圆角有两种方法:样式表、绘图事件自绘圆角

一、样式表:

setStyleSheet(“QWidget{border-radius:5px;}”)); 使用的主要是使用border-radius 属性,关于这个属性,可选的样式有 border-top-left-radius 设置左上角圆角; border-top-right-radius 设置右上角圆角; border-bottom-left-radius 设置左下角圆角; border-bottom-right-radius 设置右下角圆角; border-radius 设置四个角圆角; border-radius 参数: 一个参数代表X轴和Y轴方向的半径相同 两个参数分别代表X轴和Y轴方向的半径

二、绘图事件
绘制四个角圆角:
void QWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event)
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿
    painter.setPen(QPen(QColor(101, 132, 236),4));
    painter.setBrush(QColor(32, 38, 74));
    painter.drawRoundedRect(this->rect(),10,10);
}
单独绘制圆角:
void QWidget::paintEvent(QPaintEvent * event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing); // 抗锯齿
    painter.setClipping(true);
    QPainterPath Area; // 能画上的区域
    Area.addRoundedRect(rect(), 30, 30);
    Area.setFillRule(Qt::WindingFill); // 多块区域组合填充模式
    switch (m_type)
    {
    case LeftTop:// 左上角圆角
    {
        Area.addRect(0, height() - 30, 30, 30); // 填充左下角
        Area.addRect(width() - 30, 0, 30, 30); // 填充右上角
        Area.addRect(width() - 30, height() - 30, 30, 30);// 填充右下角
        break;
    }
    case RightTop: // 右上角圆角
    {
        Area.addRect(0, height() - 30, 30, 30); // 填充左下角
        Area.addRect(0, 0, 30, 30); // 填充左上角
        Area.addRect(width() - 30, height() - 30, 30, 30);// 填充右下角
        break;
    }
    case LeftBottom:// 左下角圆角
    {
        Area.addRect(width() - 30, 0, 30, 30); // 填充右上角
        Area.addRect(width() - 30, height() - 30, 30, 30);// 填充右下角
        Area.addRect(0, 0, 30, 30); // 填充左上角
        break;
    }
    case RightBottom: // 右下角圆角
    {
        Area.addRect(0, height() - 30, 30, 30); // 填充左下角
        Area.addRect(width() - 30, 0, 30, 30); // 填充右上角
        Area.addRect(0, 0, 30, 30); // 填充左上角
        break;
    }
    case Top:         // 上两个圆角
    {
        Area.addRect(0, height() - 30, 30, 30); // 填充左下角
        Area.addRect(width() - 30, height() - 30, 30, 30);// 填充右下角
        break;
    }
    case Bottom:     // 下两个圆角
    {
        Area.addRect(width() - 30, 0, 30, 30); // 填充右上角
        Area.addRect(0, 0, 30, 30); // 填充左上角
        break;
    }
    case Left:  // 左两个圆角
    {
        Area.addRect(width() - 30, 0, 30, 30); // 填充右上角
        Area.addRect(width() - 30, height() - 30, 30, 30);// 填充右下角
        break;
    }
    case Right:      // 右两个圆角
    {
        Area.addRect(0, height() - 30, 30, 30); // 填充左下角
        Area.addRect(0, 0, 30, 30); // 填充左上角
        break;
    }
    case All:          // 四个角圆角
    {
        break;
    }
    default:
        break;
    }
    painter.setClipPath(Area);

    QColor color(Qt::darkRed);
    painter.setPen(Qt::NoPen);
    painter.setBrush(color);
    painter.drawRect(rect());
}

效果示意图: 左上角: 右上角: 左下角: 右下角: 四个角圆角:


声明:本文内容由易百纳平台入驻作者撰写,文章观点仅代表作者本人,不代表易百纳立场。如有内容侵权或者其他问题,请联系本站进行删除。

4087
收藏
1
打赏
共1人已赏
评论
0个
内容存在敏感词
相关专栏
打赏作者
易百纳技术社区
小王子🤴
您的支持将鼓励我继续创作!
打赏金额:
¥1 易百纳技术社区
¥5 易百纳技术社区
¥10 易百纳技术社区
¥50 易百纳技术社区
¥100 易百纳技术社区
支付方式:
微信支付
支付宝支付
易百纳技术社区 微信支付
易百纳技术社区
打赏成功!

感谢您的打赏,如若您也想被打赏,可前往 发表专栏 哦~

审核成功

发布时间设置
发布时间:
是否关联周任务-专栏模块

审核失败

失败原因
备注
Loading...
易百纳技术社区
确定要删除此文章、专栏、评论吗?
确定
取消
易百纳技术社区
易百纳技术社区
在专栏模块发布专栏,可获得其他E友的打赏
易百纳技术社区
回答悬赏问答,被题主采纳后即可获得悬赏金
易百纳技术社区
在上传资料时,有价值的资料可设置为付费资源
易百纳技术社区
达到一定金额,收益即可提现~
收益也可用来充值ebc,下载资料、兑换礼品更容易
易百纳技术社区
活动规则
  • 1.周任务为周期性任务,每周周一00:00刷新,上周完成的任务不会累计到本周,本周需要从头开始任务,当前任务完成后才可以完成下一个任务
  • 2.发布的专栏与资料需要与平台的板块有相关性,禁止注水,专栏/资料任务以审核通过的篇数为准,专栏需为原创文章且首次在社区发布
  • 3.任务完成后,现金奖励直接打款到微信账户;EBC/收益将自动发放到个人账户,可前往“我的钱包”查看;其他奖励请联系客服兑换
易百纳技术社区
升级提醒
易百纳技术社区

恭喜您由入门

社区送出礼品一份

请填写您的收件地址,礼品将在3个工作日寄出

易百纳技术社区