Styling QML without manually marking each property to be styled(为 QML 设置样式,无需手动标记要设置样式的每个属性)
问题描述
我知道 QML 不像小部件那样支持 CSS 样式,并且我已经阅读了样式/主题的替代方法:
I know that QML does not support CSS styling like widgets do, and I have read up on alternative approaches to styling/theming:
- https://qt-project.org/wiki/QmlStyling
- http://www.slideshare.net/BurkhardSubert/practical-qml-key-navigation/34
这些方法的共同点是,它们要求开发人员指定可以设置样式的 QML 部分,方法是绑定到样式化 QML 文件/单例"中的属性,或者使用加载器加载不同的基于样式名称的 QML 组件.我想要的是类似于 CSS 中的id"选择器而不是class"选择器的东西,这样各个 QML 文件就不必知道它们以后是否会被设置样式.
Common for these approaches is that they require the developer to specify the parts of the QML that can be styled, either by binding to a property in a "styling QML file/singleton", or by using a Loader to load a different QML component based on style name. What I would like is something that works like the "id" selector in CSS instead of the "class" selector, so that the individual QML files do not have to know whether they will be styled later on or not.
我当前的方法使所有 QML 文件看起来都类似于此(使用链接 2 中的方法):
My current approach make all the QML files look similar to this (using approach in link 2):
Main.qml
Rectangle {
Id: background
color: g_theme.background.color
//g_theme is defined in root context and loaded dynamically
}
我想做的是:
Main.qml
Rectangle {
Id: background
color: "green" // default color
}
然后有一个样式文件定义(或类似)
And then have a styling file that defines (or similar)
Main.qml #background.color: red
目前是否有可能,或者正在为未来的 Qt 版本准备中,或者首选的样式设置方式是否会继续类似于上面链接中描述的方法?
Is this possible at the moment, or something that is in the pipeline for a future Qt version, or will the preferred way of styling continue to be something similar to the approach described in the links above?
推荐答案
首选方法不是在默认组件上应用样式,而是从这些组件派生以创建预先设置样式的自定义组件.
The preferred way isn't applying a style on default components, but deriving from these components to create pre-styled custom components.
我为我的项目做什么:
首先,我创建一个集中的主题"文件,作为 JavaScript 共享模块:
First, I create one centralized 'theme' file, as a JavaScript shared module :
// MyTheme.js
.pragma library;
var bgColor = "steelblue";
var fgColor = "darkred";
var lineSize = 2;
var roundness = 6;
接下来,我创建依赖它的自定义组件:
Next, I create custom components that rely on it :
// MyRoundedRect.qml
import QtQuick 2.0;
import "MyTheme.js" as Theme;
Rectangle {
color: Theme.bgColor;
border {
width: Theme.lineSize;
color: Theme.fgColor;
}
radius: Theme.roundness;
}
然后,我可以通过一行代码在任何地方使用我的预样式组件:
Then, I can use my pre-styled component everywhere with a single line of code :
MyRoundedRect { }
而且这种方法有一个巨大的优势:它真的是面向对象的,而不是简单的蒙皮.
And this method has a huge advantage : it's really object-oriented, not simple skinning.
如果您愿意,您甚至可以在自定义组件中添加嵌套对象,例如文本、图像、阴影等...甚至是一些 UI 逻辑,例如鼠标悬停时的颜色变化.
If you want you can even add nested objects in your custom component, like text, image, shadow, etc... or even some UI logic, like color-change on mouse hover.
PS:是的,可以使用 QML 单例而不是 JS 模块,但它需要额外的 qmldir
文件,并且仅从 Qt 5.2 开始支持,这可能会受到限制.显然,上下文属性中的 C++ QObject 也可以工作(例如,如果您想从磁盘上的文件加载皮肤属性......).
PS : yeah one can use QML singleton instead of JS module, but it requires extra qmldir
file and is supported only from Qt 5.2, which can be limiting. And obviously, a C++ QObject inside a context property would also work (e.g. if you want to load skin properties from a file on the disk...).
这篇关于为 QML 设置样式,无需手动标记要设置样式的每个属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:为 QML 设置样式,无需手动标记要设置样式的每个属性
基础教程推荐
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01