C++ Qt的设计应用

C++ Qt的设计应用,c++,qt,stylesheet,custom-widgets,C++,Qt,Stylesheet,Custom Widgets,我必须实现一个图形用户界面设计。选择的框架是Qt 经过一些实施工作,出现了一些困难和问题。主要的一点是,有一些奇特的设计元素,包括渐变、3D效果、阴影等等 目前使用的方法——我真的不太喜欢——是使用图形设计中的位图作为各种小部件的背景。根据元素的位置和可伸缩性,这有一些非常严重的缺点。这种方法生成一个相当静态的用户界面,很难维护和调整 我希望在运行时使用尽可能多的Qt默认工具动态生成所有图形元素。但我只是不知道如何实现如此复杂的视觉效果。作为示例,您可以假设下图。 问题: 一个合理的方法是如何

我必须实现一个图形用户界面设计。选择的框架是Qt

经过一些实施工作,出现了一些困难和问题。主要的一点是,有一些奇特的设计元素,包括渐变、3D效果、阴影等等

目前使用的方法——我真的不太喜欢——是使用图形设计中的位图作为各种小部件的背景。根据元素的位置和可伸缩性,这有一些非常严重的缺点。这种方法生成一个相当静态的用户界面,很难维护和调整

我希望在运行时使用尽可能多的Qt默认工具动态生成所有图形元素。但我只是不知道如何实现如此复杂的视觉效果。作为示例,您可以假设下图。

问题:
一个合理的方法是如何得到下面这样的结果的。(我不需要精确的解决方案,只需要一些指针、通用方法和最佳实践。)

您最好使用自定义小部件并在paint事件中构建效果。这里有一个例子:。这里还有一些关于自定义绘制和在小部件的paint命令中使用SVG图像的幻灯片:。在paint命令中使用SVG比使用固定的BMP图形文件更容易,因为您可以使用布局引擎

Qt 5提供了定制用户界面外观的功能

特别是,如果要在按钮上标记纹理,请查看。
它展示了如何使用边框来指定不应拉伸的区域。

另一种解决方案是使用Qt样式表,它允许您自定义小部件。检查以下示例:

下面是QPushButton的样式,它看起来和图片上的按钮“相似”。但这可能足以满足你的要求

background-color: qradialgradient(spread:pad, cx:0.499807, cy:0.489, radius:0.5, fx:0.499, fy:0.488909, stop:0.0795455 rgba(0, 147, 185, 255), stop:1 rgba(30, 30, 30, 255));
border: 5px solid black;
border-radius: 15px;

有关如何在QML中执行类似操作的详细演练,请参阅。如果你熟悉QPainter,你可以用C++来把它移植到小部件上。

大多数时候,花式效果是预置的透明覆盖(根据需要拉伸或重复)。我认为这比我提到的当前使用的方法更不可伸缩,是吗?如果没有质量损失,我无法扩展。(据我所知)看看
QML
。如果您已经对css+javascript有了一定的了解,或者希望获得一些知识,那么qml是完美的。这也是Qt项目想要去的地方。感谢您提供的非常有用的链接;)下面是另一个我觉得有用的链接,但我找不到: