In my qml file i have a lot of uniform objects with few differencies (id for example).
I want to use "Don't Repeat Yourself" principle
So i want create custom local template, which i'll can append with unique properties on using.
I know about creating separate .qml file, but this templates are too small for this mechanism (It's seems wired for me to create separate .qml file for red squares with 2px border)
Is there any meachanism for small templates in qml?
Qt 5.15.0 adds support for inline components. Here's the example from the docs:
import QtQuick 2.15
Item {
component LabeledImage: Column {
property alias source: image.source
property alias caption: text.text
Image {
id: image
width: 50
height: 50
}
Text {
id: text
font.bold: true
}
}
Row {
LabeledImage {
id: before
source: "before.png"
caption: "Before"
}
LabeledImage {
id: after
source: "after.png"
caption: "After"
}
}
property LabeledImage selectedImage: before
}
Related
There is this QML setup to remember application theme:
import QtQuick.Controls 2.0 as QQC2
QQC2.ApplicationWindow {
id: standaloneWindow // ID is required to be able to get properties
Material.theme: Material.Dark // Can be either Dark or Light
Component.onCompleted: {
// On launch, read theme from settings file
standaloneWindow.Material.theme = appSettings.materialTheme
}
Component.onDestruction:{
// On close, write theme to settings file
appSettings.materialTheme = standaloneWindow.Material.theme
}
Settings {
id: appSettings
category: "Theme"
property int materialTheme // Store theme as "int" type in settings file
}
}
Problem
At the very first launch (for example when settings file is deleted), the theme cannot be started with Dark. At the very first launch, the app always starts with Light theme, no matter what!
Cause
When there is no settings file, the appSettings.materialTheme becomes 0 which is default for int type. Consequently, 0 is equivalent to Material.Dark enum. That's why application always starts at dark mode when there is no settings file.
Question
How can I make the application start with light mode, even when there is no settings file?
Tried so far
I tried to use alias rather than int, but standaloneWindow doesn't have a property to bind to Material.theme:
Settings {
// ...
property alias materialTheme: standaloneWindow.???
}
Any suggestion?
As commented by #Mitch , problem got resolved by:
Settings {
id: appSettings
category: "Theme"
// Set dark theme to be default for the very first launch (when settings file is NOT available)
property int materialTheme: Material.Dark
}
I'm using Storybook v5.2.6 and am trying to change the size of the grid lines shown in my stories.
After adding #storybook/addon-backgrounds a toggle grid button appears in my Storybook toolbar. Clicking the button plots a 20px grid:
I want to globally change the grid size to be 8px and I have tried the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
gridCellSize: 8,
grid: { cellSize: 8 }, // alternative approach
brandTitle: 'Hello, World!',
});
addParameters({
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I haven't been able to find any documentation on how to use this parameter globally, but it seems to be the correct approach because:
In the Storybook 'Kitchen Sink' repo, the gridCellSize parameter is set like this, along with other theme variables.
In PR #6252 the author makes a change to "Pick up gridCellSize from Theme configuration options"
So I thought my above attempt would work, however a 20px grid is still plotted.
In the release notes for Storybook 5.2.0-alpha.43 they mention the breaking change:
"Move grid toolbar feature to background-addon".
However, there are no migration instructions
So, the question is, how do I set the grid cell size?
Update
I've upgraded to Storybook 5.3.0-beta.19 and can now set the grid size on a story-by-story basis, but I'm still unable to set this globally.
Button.story = {
parameters: {
grid: { cellSize: 8 },
},
};
After trying various permutations, I've stumbled upon the correct configuration.
This works with Storybook 5.3.0-beta.19. I'm not sure about earlier versions.
Rather than setting the gridCellSize parameter in the theme, you need to add grid: { cellSize: 8 } to the configuration parameters. In your config.js file, do the following:
import { configure, addParameters } from '#storybook/react';
import { create } from '#storybook/theming/create';
const storyBookTheme = create({
brandTitle: 'Hello, World!',
});
addParameters({
grid: { cellSize: 8 }
options: {
theme: storyBookTheme,
},
...
});
configure(require.context('../stories', true, /\.stories\.js$/), module);
I am trying to create a customizable Qt3D component by merging three ConeMeshes into a single entity. The user must be able to interact with the custom entity, so I have added an ObjectPicker to the file. Normally, I would use a predefined scaled .obj file, but my manager wants the objects to be drawn directly by Qt.
The two meshes I want to combine are defined in a seperate qml file, so I can call it within my Scene3D.
Entity {
ObjectPicker {
id: combinedPicker
}
ConeMesh {
id: conemesh1
...
}
ConeMesh {
id: conemesh2
...
}
Transform {
id: conetransform1
}
Transform {
id: conetransform2
}
Entity {
components: [conemesh1, conetransform1, conemesh2, conetransform2, combinedPicker]
}
}
My approach for putting the meshes together is to enclose them as components in a separate Entity scope, as shown in the last line. But this approach only renders the last entry in the components array. Above, that would be conemesh2.
Previously I tried to create multiple Entity instances, and pass each one the id of the ObjectPicker,
Entity {
components: [conemesh1, conetransform1, combinedPicker]
}
Entity {
components: [conemesh2, conetransform2, combinedPicker]
}
But as per the documentation of ObjectPicker, the object picker is not meant to be shared by multiple components.
So my question is this: What is the correct approach when merging multiple meshes into one single mesh in Qml?
I solved the problem by "factoring" out the ObjectPicker element, effectivly making it a sibling of the mesh entities.
Entity {
components:
[conePicker]
Entity {
id: pipeTopEntity
components: [coneMeshTop, coneTransformTop, floorMaterialTop]
}
Entity {
id: pipeBodyEntity
components: [coneMeshBody, coneTransformBody, floorMaterialBody]
}
Entity {
id: pipeBotEntity
components: [ coneMeshBot, coneTransformBot, floorMaterialBot]
}
}
I have just started playing with QML and have a view where I have a bunch of components as follows:
Window {
....
property Component dateTumbler: ControlView {
// Definition follows
}
property Component timeTumbler: ControlView {
// More definition follows
}
// More controls
}
This makes the main QML file very long and cumbersome to edit and maintain. I tried to separate this into different files as follows:
// DateTumblerView.qml
component: DateTumblerView { // Not sure how to inherit here..
// Definition here
}
I'm trying to use it like this:
property component dateTumbler: DateTumblerView {}
However, this never works and the DateTumblerView is never found. I am not sure if I am doing this correctly.
[EDIT]
ControlView is defined as follows:
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtMultimedia 5.5
Rectangle {
id: view
property bool darkBackground: false
Text {
id: textSingleton
}
SoundEffect {
id: playCalSound
source: "qrc:/sound/test.wav"
}
}
[END EDIT]
What is the proper way to split QML code into multiple files?
Your DateTumblerView.qml file should look like this:
ControlView {
// More definition follows
}
And you would use it like this:
property Component dateTumbler: DateTumblerView {}
Or:
Component {
id: dateTumbler
DateTumblerView {}
}
Or if you wanted to use it directly:
DateTumblerView {}
It's pretty much the same as when your code was just in one file. Anytime you do <Type> {}, you're inheriting that type and can set or add new properties, functions, and subcomponents. The difference is that it is in a separate file, has a specific name (the name of the file), and you can reuse that code as many times as you want.
For more details, see Defining Custom QML Types for Re-use.
I am using Qt 5.2 and QtQuick 2.2.
In my project I have several modules that are placed in separated directories. My problem is that I can't use dot-separator in typename while defining properties.
For example:
MyRect.qml
import QtQuick 2.2
Rectangle {
id: root
property color rectColor: "white"
color: root.rectColor
}
MyRectInRect.qml
import QtQuick 2.2
import "./" as MyModule
Rectangle {
id: root
property MyModule.MyRect innerRect: MyModule.MyRect { }
// ^ error: Unexpected token `.'; Unexpected token `identifier'
}
I have searched for something that could explain this behavior in the manual, but looks like there is nothing about it there. I guess that dot symbol is not allowed to be used in "type" field of property definition. But is there any way to explicitly define, what component from which module should be used as a type? Cause there may be need of declaring properties with same typenames, but from different modules.
This is a known issue: QTBUG-10822