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

闲来无事，做了个小demo。

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

效果图：

模仿自学习通网页：

 

 记录一些学到的点：

1.

 使用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);
}