73 lines
1.8 KiB
Markdown
73 lines
1.8 KiB
Markdown
|
## Creating a Custom QML component
|
||
|
|
|
||
|
|
Creating a custom element typically involves
|
||
|
|
* creating a new QML file
|
||
|
|
* adding that QML file in a qmldir file
|
||
|
|
* adding that QML file to the project `nim-status-client.pro` file (automatic if done in QT Creator)
|
||
|
|
|
||
|
|
The easiest way is to do it in QT creator although this can be done manually as well, if not using QT Creator make sure the files are added in the nim-status-client.pro.pro file.
|
||
|
|
|
||
|
|
**step 1 - create folder**
|
||
|
|
|
||
|
|
In QT creator, go to `app/AppLayouts` right click, and select "New folder", name the folder `MySection`
|
||
|
|
|
||
|
|
**step 2 - create QML file**
|
||
|
|
|
||
|
|
In `MySection`, right click, and select "Add New", select "QT" -> "QML File (Qt Quick 2)", as a name put `MyQMLComponent.qml` and create the file.
|
||
|
|
|
||
|
|
Add the desired content, for example
|
||
|
|
|
||
|
|
```qml
|
||
|
|
import QtQuick 2.0
|
||
|
|
|
||
|
|
Item {
|
||
|
|
Text {
|
||
|
|
text: "hello"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
if not using QT Creator, make sure the files are added in the nim-status-client.pro.pro file, for e.g:
|
||
|
|
|
||
|
|
```
|
||
|
|
DISTFILES += \
|
||
|
|
app/AppLayouts/MySection/MyQMLComponent.qml \
|
||
|
|
```
|
||
|
|
|
||
|
|
**step 3 - add the component to qmldir**
|
||
|
|
|
||
|
|
In `app/AppLayouts/` edit `qmldir` and add the file
|
||
|
|
|
||
|
|
```
|
||
|
|
BrowserLayout 1.0 Browser/BrowserLayout.qml
|
||
|
|
ChatLayout 1.0 Chat/ChatLayout.qml
|
||
|
|
NodeLayout 1.0 Node/NodeLayout.qml
|
||
|
|
ProfileLayout 1.0 Profile/ProfileLayout.qml
|
||
|
|
WalletLayout 1.0 Wallet/WalletLayout.qml
|
||
|
|
|
||
|
|
MyQMLComponent 1.0 MySection/MyQMLComponent.qml
|
||
|
|
```
|
||
|
|
|
||
|
|
This ensures that when `app/AppLayouts/` is imported, the component `MyQMLComponent` will point to the component at `MySection/MyQMLComponent.qml`
|
||
|
|
|
||
|
|
**step 4 - use the component**
|
||
|
|
|
||
|
|
Note that `AppMain.qml` already imports AppLayouts
|
||
|
|
|
||
|
|
```qml
|
||
|
|
import "./AppLayouts"
|
||
|
|
```
|
||
|
|
|
||
|
|
which makes the `MyQMLComponent` available
|
||
|
|
|
||
|
|
In the section created in the `Adding a sidebar section`, replace it with this component
|
||
|
|
|
||
|
|
```qml
|
||
|
|
StackLayout {
|
||
|
|
...
|
||
|
|
|
||
|
|
MyQMLComponent {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|