Qt Design Studio 3.8发布

Qt Design Studio 3.8 Released

Qt Design Studio 3.8发布

November 16, 2022 by Thomas Hartmann | Comments

2022年11月16日 ​托马斯·哈特曼 | 评论

We are proud to announce the release of Qt Design Studio 3.8.

我们很自豪地宣布Qt Design Studio 3.8的发布。

Qt Design Studio is a UI design and development tool which is used to rapidly prototype and create complex UIs. The Qt Design Studio outputs a functional user interface as code that can be used as-is with the backend. So combining the UI with the backend is really straightforward. To get an impression you should watch this video.

​Qt Design Studio是一个UI设计和开发工具，用于快速原型化和创建复杂的UI。QtDesignStudio输出一个功能性的用户界面作为代码，可以直接用于后端。因此，将UI与后端结合起来非常简单。要获得印象，您应该观看此视频。

For detailed information about Qt Design Studio, visit the online documentation page.

​有关Qt Design Studio的详细信息，请访问在线文档页面。

This release of Qt Design Studio introduces bunch of usability improvements as well as some new features that help you to create user interfaces even faster. 

Qt Design Studio的这一版本引入了一系列可用性改进以及一些新功能，帮助您更快地创建用户界面。

Qt Quick Effect Maker

Qt Quick效果生成器

In Qt Design Studio 3.8 we have integrated the Qt Effect Maker.

​在Qt Design Studio 3.8中，我们集成了Qt Effect Maker。

The Qt Quick Effect Maker is a tool to create post-processing shader effects for Qt Quick. It allows you to create your own custom effects based on a comprehensive library of ready-made building blocks, like blur, shadows, noise, colorize, masks, and many more. The node library even contains animatable textures like plasma, clouds, thunder, water, and rain. Please check out this video to get an impression of what is possible.

Qt Quick Effect Maker是一个为Qt Quick创建后期处理着色器效果的工具。它允许您基于现成的构建块的综合库创建自己的自定义效果，如模糊、阴影、噪声、着色、遮罩等。节点库甚至包含可设置动画的纹理，如等离子、云、雷、水和雨。请查看此视频，了解可能的情况。

You create your effect by combining nodes in the Qt Effect Maker which is its own tool that can be launched from Qt Design Studio. The Qt Effect Maker allows you to combine different effects that are represented as nodes and you can create your own custom nodes. Qt Effect Maker comes with a nice preview and when you are done designing your effect you can export it as a QML component that works in Qt Design Studio.

你可以通过Qt effect Maker中的节点来创建你的效果，这是它自己的工具，可以从Qt Design Studio启动。Qt Effect Maker允许您组合表示为节点的不同效果，您可以创建自己的自定义节点。Qt Effect Maker附带了一个很好的预览，当你设计好你的效果后，你可以将其导出为一个在Qt Design Studio中工作的QML组件。

After exporting the effects they can be used in Qt Design Studio and applied to Qt Quick items in the 2d editor. In the screenshot, you can also see some of the more advanced effects like normal mapping, vignette, and plasma. 

导出效果后，它们可以在Qt Design Studio中使用，并应用于二维编辑器中的Qt Quick项。在截图中，您还可以看到一些更高级的效果，如法线贴图、渐晕和等离子。

To learn more about Qt Quick Effect Maker check out this blog post for more details on Qt Quick Effect Maker or the documentation. Here you can find learn how to create a simple blur effect.

​要了解有关Qt Quick Effect Maker的更多信息，请查看此博客文章，以获取有关Qt QuickEffect Maker或文档的更多详细信息。在这里，您可以学习如何创建简单的模糊效果。

New States Editor

新的状态编辑器

Qt Design Studio 3.8 comes with a new advanced states editor, that supports vertical and grid layouts and provides new features, like getting an overview of all property changes, defining extra state groups, or extending states.

​Qt Design Studio 3.8附带了一个新的高级状态编辑器，它支持垂直和网格布局，并提供了新的功能，如获取所有属性更改的概述、定义额外的状态组或扩展状态。

In the screenshot, you can see the new vertical layout of the new states editor, which allows docking the states editor on the side. One important new feature are State Groups. State groups allow the definition of a new set of states, without the need to define an extra component. The new states editor also allows reordering states, which is especially useful if you have many states. For more details please check out the documentation.

​
在截图中，您可以看到新状态编辑器的新垂直布局，它允许将状态编辑器停靠在侧面。一个重要的新功能是状态组。状态组允许定义一组新的状态，而无需定义额外的组件。新的状态编辑器还允许对状态进行重新排序，这在您有许多状态时尤其有用。有关详细信息，请查看文档。
 

Qt Design Viewer

Qt设计查看器

Qt Design Studio 3.8 now supports sharing projects and applications online using a WebAssembly-based viewer application called Qt Design Viewer.

Qt Design Studio 3.8现在支持使用名为Qt Design viewer的基于WebAssembly的查看器应用程序在线共享项目和应用程序。

https://youtu.be/RieOEQXQsHQ

As shown in the video you can upload your application and share it with other project members using a web link. Receiving party needs just a web browser, so no installation of Qt Design Studio or Qt products is needed.

如视频所示，您可以上传应用程序并使用web链接与其他项目成员共享。接收方只需要一个网络浏览器，因此不需要安装Qt Design Studio或Qt产品。

In the screenshot, you can see the UI of the online sharing dialog. After uploading the project you can open the project in your web browser or copy the link to share it. You can also manage your already shared applications from this dialog.

在屏幕截图中，您可以看到在线共享对话框的UI。上载项目后，您可以在web浏览器中打开该项目或复制链接以共享该项目。您还可以从此对话框中管理已共享的应用程序。

This is the animation tutorial running in the Qt Design Viewer. The Qt Design Viewer runs and is tested on Chrome, Edge, Safari, and Firefox. As you can see in the screenshot Qt Quick 3D is also supported. Please also check out the documentation. 

​这是在Qt Design Viewer中运行的动画教程。Qt Design Viewer在Chrome、Edge、Safari和Firefox上运行和测试。如您在截图中所见，Qt Quick 3D也受支持。还请查看文档

Qt Figma bridge is now a Figma community plugin

Qt Figma桥现在是Figma社区插件

The Qt Bridge for Figma can now be found in the community marketplace for Figma plugins. This means the plugin can be installed as a community plugin and there is no need to manually load the plugin manifest from the Qt Design Studio installation. The website for the Figma plugin also contains the version history and changelog.

​Figma的Qt Bridge现在可以在Figma插件的社区市场中找到。这意味着插件可以作为社区插件安装，无需从Qt Design Studio安装中手动加载插件清单。Figma插件的网站还包含版本历史和更改日志。

Getting Started

入门

 If you don't have it yet, you can request a free trial here: Qt Design Studio page

​如果你还没有，你可以在这里申请免费试用：Qt Design Studio页面

If you already have theQt installer, you can find Qt Design Studio under in Qt installer under Tools > Qt Design Studio.

如果您已经安装了Qt安装程序，可以在“工具”>“Qt设计工作室”下的Qt安装中找到Qt Design Studio。

Qt Design Studio Studio is available in three different editions. Enterprise, Professional, and a free Community edition. The Enterprise version of Qt Design Studio also contains the Photoshop, Sketch, Figma, and Adobe XD bridges, plus the Simulink integration and multi-language editor support.

​Qt Design Studio Studio有三种不同版本。企业版、专业版和免费社区版。Qt Design Studio的企业版还包含Photoshop、Sketch、Figma和Adobe XD桥，以及Simulink集成和多语言编辑器支持。

You can find the latest online documentation for Qt Design Studio here. The documentation is also available from inside Qt Design Studio.

​您可以在这里找到Qt Design Studio的最新在线文档。该文档也可从Qt Design Studio内部获得。

The welcome page of Qt Design Studio contains examples and links to video tutorials to help you get started.

​Qt Design Studio的欢迎页面包含示例和视频教程链接，帮助您入门。

Of course, each Qt Design Studio contains many more bug fixes and small improvements. Please check the change log  for more details.

​当然，每个QtDesignStudio都包含更多的bug修复和小的改进。有关详细信息，请查看更改日志。

Please post issues you find or suggestions you have in our bug tracker.

​请在我们的bug跟踪器中发布您发现的问题或建议。