[明星艺术] Qt如何制作漂亮的界面？

阅读网购物网址万年历小说 | 三丰软件天天财富小游戏

TxT小说阅读器
↓小说语音阅读,小说下载↓

一键清除系统垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

图片自动播放器
↓图片自动播放,产品展示↓

佛经: 故事佛经佛经精华心经金刚经楞伽经南怀瑾星云法师弘一大师名人学佛佛教知识标签

名著: 古典现代影视名著外国儿童武侠传记励志诗词故事杂谈道德经讲解词句大全词句标签哲理句子

网络: 舞文弄墨恐怖推理感情生活潇湘溪苑瓶邪原创小说故事鬼故事微小说耽美师生内向易经后宫鼠猫美文

教育信息历史人文明星艺术人物音乐影视娱乐游戏动漫 | 穿越校园武侠言情玄幻经典语录三国演义西游记红楼梦水浒传

阅读网 -> 明星艺术 -> Qt如何制作漂亮的界面？ -> 正文阅读

[明星艺术]Qt如何制作漂亮的界面？

[收藏本文] 【下载本文】

最近在使用Qt做界面，需要根据设计给的效果图做，但是一些界面，设计用ps画的简单，真正用Qt去实现却很无力。之前用的最多的就是使用控件的setSty…

刚写 Qt 的时候，还真不知道怎么绘制出漂亮的界面，那时候读研，也只要求能实现功能就行，后来工作后写 Qt 才开始照着UI给的图画按钮，画控件，当时还觉得蛮有意思的。总结下写 Qt 以来画界面用到的一些方法。
styleSheet
如果对控件做一些简单的修饰，可以选用 setStyleSheet 接口，设置包括背景色、字体、边框等简单的样式。

QWidget *widget = new QWidget;
// 使用 setStyleSheet 设置背景色为红色
widget->setStyleSheet("QWidget { background-color: red; }");
// 如果你想要设置特定类型的控件的背景色，比如 QPushButton  
QPushButton *button = new QPushButton("My Button", widget);
button->setStyleSheet("QPushButton { background-color: blue; }");

对于复杂的样式不建议使用 styleSheet 实现，这个一直没找到的官方最全的文档，一般简单使用到网上搜索一下，而且这种形式可调试性很，绘制出来有问题很难解决。
paintEvent

Qt 跨平台的 raster 引擎绘制就是先绘制一张图，然后丢给系统，把图绘制到窗口上，因为是在一张图上进行绘制，定义好图的像素格式就能直接跨平台。paintEvent 就是 Qt 留给我们在图上面绘制内容的接口。绝大多数复杂一点的控件都会使用 paintEvent 进行绘制。

class CircleWidget : public QWidget {  
protected:  
    void paintEvent(QPaintEvent *event) override {  
        QPainter painter(this);  
        painter.setRenderHint(QPainter::Antialiasing, true); // 抗锯齿  
  
        // 设置画笔颜色  
        painter.setBrush(QBrush(Qt::blue)); // 设置填充颜色为蓝色  
        painter.setPen(QPen(Qt::black, 2)); // 设置线条颜色为黑色，线宽为2  
  
        // 绘制一个圆，中心位于窗口中心，半径为窗口宽度的一半减去一些边距  
        int radius = width() / 2 - 10;  
        painter.drawEllipse(QPoint(width() / 2, height() / 2), radius, radius);  
    }  
};

上面利用 Qt 提供的 QPainter 绘制体系绘制了一个圆。如果想要成为一名合格的画图仔，学好 QPainter 相关的绘制体系十分重要。如果是初学者想看看 paintEvent 如何画界面，可以看看这个或这个小项目（大佬直接忽略），没有任何技术含量，代码写的也不行，仅仅是通过 paintEvent 画了一个类似 360 的界面和音乐播放器界面，只能说看看 paintEvent 如何画界面。
QPropertyAnimation

如果还想让界面动起来，那就需要用一用 QPropertyAnimation 属性动画，其实也可以自己通过 QTimer + paintEvent 实现，不过属性动画中有一些描述变化曲率的函数还是比较好用的。上面提到的两个小项目中都有动态元素也是用到了属性动画。

int main(int argc, char *argv[])  
{  
    QApplication app(argc, argv);  
  
    // 创建一个QWidget实例  
    QWidget *widget = new QWidget;  
    widget->resize(100, 100); // 设置尺寸  
    widget->setStyleSheet("background-color: red;"); // 设置背景色为红色  
  
    // 创建QPropertyAnimation实例  
    QPropertyAnimation *animation = new QPropertyAnimation(widget, "pos");  
    animation->setDuration(1000); // 设置动画持续时间为1000毫秒  
  
    // 设置动画的起始位置和结束位置  
    animation->setStartValue(widget->pos()); // 当前位置作为起始位置  
    animation->setEndValue(QPoint(widget->x() + 200, widget->y())); // 水平向右平移200像素  
  
    // 开始动画  
    animation->start();  
  
    // 显示窗口  
    widget->show();  
  
    return app.exec();  
}

QOpenGLWidget

如果需要更加炫酷的动画效果又不想忍受 Qt 属性动画不太好的性能，那可能需要通过 3D 渲染的方式来实现了，具体可以参考下面文章。通过 QOpenGLWidget 自定义 3D 绘制内容，通过 Shader 可以实现很多炫酷的效果，由于是通过 GPU 绘制，绘制性能要比属性动画好很多。当然这样开发效率自然是不如属性动画的。
QStyle
如果需要统一整体界面风格，支持皮肤切换，就需要研究下 QStyle。把用到的基础控件都自定义绘制一遍，相当于整个界面完全自定义，工作量也不小>-<。