为QML设置样式，而无需手动标记要作为样式的每个属性 [英] Styling QML without manually marking each property to be styled

问题描述

我知道QML不支持CSS样式像小部件做，我已经阅读了样式/主题的替代方法：

• https://qt-project.org/wiki/QmlStyling


• < a href =http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation/34> http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation/34 < a>

这些方法的共同之处在于，它们要求开发人员指定可以样式化的QML部分，到样式QML文件/单例中的属性，或者通过使用加载器基于样式名称加载不同的QML组件。我想要的是类似于CSS中的id选择器而不是类选择器，以便各个QML文件不必知道它们是否将被后面的样式。

我目前的方法使所有的QML文件看起来都像这样（使用链接2中的方法）：

Main.qml

  Rectangle {
 Id：background 
 color：g_theme .background.color 
 // g_theme在根上下文中定义并动态加载
} 
  

我想做的是：

Main.qml

  Rectangle {
 Id：background 
 color：green//默认颜色
} 
  pre> 
 
 
然后有一个定义（或类似）的样式文件
  Main.qml＃background.color：red 
  
 
解决方案
 
 / div> 
首选方式不是在默认组件上应用样式，而是从这些组件导出以创建预定义的自定义组件。
 
 
 
对于我的项目：
 
 
 
首先，我创建一个集中的主题文件作为JavaScript共享模块：
  // MyTheme.js 
 .pragma library; 
 var bgColor =steelblue; 
 var fgColor =darkred; 
 var lineSize = 2; 
 var roundness = 6; 
  
接下来，我创建了依赖它的自定义组件：
  // MyRoundedRect.qml 
 import QtQuick 2.0; 
 importMyTheme.js作为主题; 
 Rectangle {
 color：Theme.bgColor; 
 border {
 width：Theme.lineSize; 
 color：Theme.fgColor; 
} 
 radius：Theme.roundness; 
} 
  
然后，我可以使用我的预定义组件代码：
  MyRoundedRect {} 
  
这种方法有一个巨大的优势：它真的面向对象，而不是简单的皮肤。
 
 
 
如果你想，你甚至可以添加嵌套对象在您的自定义组件，如文本，图像，阴影等，甚至一些UI逻辑，如鼠标悬停颜色变化。
 
 
 
 PS：使用QML单例而不是JS模块，但它需要额外的 qmldir 文件，并且只能从Qt 5.2支持，这可以是限制。显然，上下文属性中的C ++ QObject也可以工作（例如，如果你想从磁盘上的文件加载皮肤属性...）。
 
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/BurkhardStubert/practical-qml-key-navigation/34


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. 

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
}
What I would like to do is:

Main.qml
Rectangle {
    Id: background
    color: "green" // default color
}
And then have a styling file that defines (or similar)
Main.qml #background.color: red
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.

What I do for my projects :

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.

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 : 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设置样式，而无需手动标记要作为样式的每个属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！