Qt模仿学习通网页部分页面

闲来无事，做了个小demo。

gitee源码：Qt与学习通页面: 记录与Qt相关的代码

效果图：

模仿自学习通网页：

记录一些学到的点：

使用QScrollArea存放按钮

2.滚动条美化：

QScrollBar:vertical{
background-color:rgb(77, 88, 181);
border:0px;
width:10px;
}
QScrollBar::handle:vertical{
background-color:rgb(133, 132, 153);
border-radius:4px;
width:9px;
}QScrollBar::handle:vertical:hover{
background-color:rgb(155, 151, 151);
}
QScrollBar::sub-page:vertical,QScrollBar::add-page:vertical{
background-color:rgb(77, 88, 181);
}

3.关于按钮，我使用的是刘典武大神开源的navbutton

对于navbutton.h,navbutton.cpp

之前的文章简单使用过，很好用。

把QPushButton提升为NavButton

我们可以很方便地设置不同状态下的背景颜色

        btn->setNormalBgColor(QColor(77, 88, 181));btn->setHoverBgColor(QColor(36, 57, 169));btn->setCheckBgColor(QColor(89, 101, 201));

设置正常情况文本颜色

      btn->setNormalTextColor(QColor(255,255,255));

设置左边的图标

        quint32 size = 15;quint32 pixWidth = 15;quint32 pixHeight = 15;int icon=0xf0cb;QPixmap iconNormal = IconHelper::getPixmap(QColor(176, 179, 184).name(), icon, size, pixWidth, pixHeight);QPixmap iconHover = IconHelper::getPixmap(QColor(8, 156, 255).name(), icon, size, pixWidth, pixHeight);QPixmap iconCheck = IconHelper::getPixmap(QColor(8, 156, 255).name(), icon, size, pixWidth, pixHeight);btn->setTextFont(textfont);btn->setPaddingLeft(55);btn->setShowIcon(true);btn->setIconSpace(20);btn->setIconSize(QSize(20, 20));btn->setIconNormal(iconNormal);btn->setIconHover(iconHover);btn->setIconCheck(iconCheck);

当然这里用了刘大神的另一个开源工具类iconhelper

用它来获取图片

4.因为我发现按钮右边也需要一个图标，所以我简单地改造了NavButton

就模仿原有的icon的变量和方法

生成对应的icon2的变量和方法

5.关于按钮字体

本来的NavButton也没有提供设置文本字体的函数

我也简单添加了对应的接口。

    void setTextFont(QFont font);

6.还有就是去除上面的红线部分

    setWindowFlag(Qt::FramelessWindowHint);setAttribute(Qt::WA_TranslucentBackground);

但是这样的话就不能移动了。

我们只需要重写三个函数即可

protected:void mouseMoveEvent(QMouseEvent *event);void mousePressEvent(QMouseEvent *event);void mouseReleaseEvent(QMouseEvent *event);

7.最后呈现效果时，我发现顶层窗口不是圆角矩形，这样解决：

（重写paintEvent函数)

void trywidget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);  // 反锯齿;painter.setBrush(QBrush(Qt::red));painter.setPen(Qt::transparent);QRect rect = this->rect();rect.setWidth(rect.width() - 1);rect.setHeight(rect.height() - 1);painter.drawRoundedRect(rect, 15, 15);QWidget::paintEvent(event);
}

Qt模仿学习通网页部分页面相关推荐

关于Qt 加载网页（二） QWebenginePage和QWebengineView傻傻分不清楚
书接上回,关于Qt加载网页(一)末尾提到一个createWindows用法的问题,并且提供了两个参考博文.本人在初次使用createWindows的时候产生了一个疑问,如果在函数中直接返回this,是 ...
几个不错的网页载入页面
流动性非常好的网页载入页面第一种: CODE: [复制] <html> <head><TITLE>红樱桃社区</TITLE> <meta ht ...
UI设计实用素材|网页陆地页面的业务和发展概念插图
为网站页面制作的精美插图.矢量.Ai和.EPS 10文件中的概念.适用于网站页面,单击预览按钮查看所有12个插图. 12个网页陆地页面的业务和发展概念插图 12商业与发展插图基于100%向量 100 ...
C++ Qt自建网页浏览器
C++ Qt自建网页浏览器如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言这篇博客针对<<C++ Qt自建网页浏览器>>编写代码,代码整洁 ...
aliexpress商品详情API接口（速卖通商品详情页面数据接口）
aliexpress商品详情API接口(速卖通商品详情页面数据接口)代码对接如下: 1.公共参数名称类型必须描述 key String 是调用key(必须以GET方式拼接在URL中,点击获取 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
为网页承载页面添加更多功能
OneSwift - iOS Tips Based On Swift 接上一篇文章,我们在设置中心通常会跳转到某一个网页承载页面,而通常我们会添加一些功能来提升他的体验. 1.添加菊花加载的效果 2. ...
Web入门之VScode基本操作，文本框、输入框、单选框、多选框、列表、插入图片、插入按钮及跳转网页和页面
Web入门之VScode基本操作,表单.输入框.单选框.多选框.列表.插入图片.插入按钮及跳转网页和页面已经在VSCode中新建了.html项目,下面我们来进行一些基本的简单操作,关于如何新建项目, ...
如何测试网页登录页面
如何测试网页登录页面这个面试题碰到过很多次, 再次总结下来. 具体需求: 有一个登陆页面, 上面有2个textbox, 一个提交按钮. 请针对这个页面设计30个以上的test case. 此题的考 ...

Qt模仿学习通网页部分页面

Qt模仿学习通网页部分页面相关推荐

最新文章

热门文章