I have bad problem on my qml code performance, laggy when swiping between "Inbox" and "MyBoxes", code is simple but... Ok, here is my code, main:
Loader {
id: loader
anchors.fill: parent
sourceComponent: splash
}
Component {
id: splash
Splash {
percent: l_i.load
fin: ()=>{
loader.sourceComponent = swip_cmp
}
}
}
Component {
id: swip_cmp
Swip {
}
}
Swip.qml:
Page {
SwipeView {
id: swipeView
topPadding: 10
anchors.fill: parent
currentIndex: tabBar.currentIndex
Inbox {
title: "Inbox"
}
MyBoxes {
title: "MyBoxes"
}
}
header: Navigation {
id: tabBar
pageIndex: swipeView.currentIndex
implicitHeight: 50
width: parent.width
anchors.top: head.bottom
anchors.topMargin: 0
tabs:[
NavButton { text: "Inbox"; icon.source: "../assets/Inbox.png" },
NavButton { text: "MyBoxes"; icon.source: "../assets/Box.png" },
NavButton { text: "Leitners"; icon.source: "../assets/Cards.png" }
]
}
}
MyBoxes.ui.qml:
Page {
Rectangle{
id: page
width: parent.width * .9
anchors.horizontalCenter: parent.horizontalCenter
Column {
spacing: 5
Box {
width: page.width
active: true
title: "504"
totalwords: "504"
details: "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
}
Box {
width: page.width
title: "504"
totalwords: "504"
details: "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups."
}
}
}
}
Box.qml:
Item {
id: item2
property string title: "title"
property string totalwords: "totalwords"
property string details: "details"
property string src: "src"
property bool online: false
property bool active: false
height: head.contentHeight+det.contentHeight + 50
Rectangle {
id: bodybg
anchors.fill: parent
color: "#FFFFFF"
Text {
id: head
color: "#373737"
text: title
font.bold: true
font.pointSize: 14
anchors.leftMargin: 5
anchors.topMargin: 5
anchors.left: parent.left
anchors.top: parent.top
}
Text {
id: tw
color: "#777777"
text: totalwords
font.bold: true
font.pointSize: 10
anchors.top: parent.top
anchors.topMargin: 5
anchors.right: parent.right
anchors.rightMargin: 5
}
Rectangle {
id: hr
width: parent.width * .9
height: 1
color: "#707070"
anchors.top: head.bottom
anchors.topMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
}
Text {
id: det
width: parent.width
color: "#222222"
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: details
anchors.margins: 5
anchors.top: hr.bottom
anchors.right: parent.right
anchors.left: parent.left
}
Button {
id: add
width: 64
height: 26
text: online ? "Download" : (active ? "Deactive" : "Active")
anchors.right: parent.right
anchors.top: det.bottom
anchors.rightMargin: 5
anchors.bottomMargin: 5
contentItem: Rectangle {
id: rectangle
anchors.fill: parent
color: (active ? "#BC0C52" : "#00C193")
Text {
text: add.text
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "#FFFFFF"
}
}
}
Text {
id: delt
visible: !online
color: "#BC0C52"
text: "Delete"
anchors.verticalCenter: add.verticalCenter
anchors.right: add.left
anchors.rightMargin: 10
font.underline: true
}
}
DropShadow {
anchors.fill: bodybg
samples: 17
color: "#80000000"
source: bodybg
}
}
I have no matter cpp code yet! It's mostly code:| I think Box.qml must optimize, or may problem be because of long texts in MyBoxes.ui.qml Or maybe I should change compile configuration, here is qmake:
-spec android-clang "CONFIG+=debug" "CONFIG+=qml_debug" ANDROID_ABIS="armeabi-v7a" && D:/Android/SDK/ndk/21.1.6352462/prebuilt/windows-x86_64/bin/make.exe qmake_all
You can try setting cached: true
on the DropShadow
:
This property allows the effect output pixels to be cached in order to improve the rendering performance. Every time the source or effect properties are changed, the pixels in the cache must be updated. Memory consumption is increased, because an extra buffer of memory is required for storing the effect output.
It is recommended to disable the cache when the source or the effect properties are animated.
By default, the property is set to false.
https://doc.qt.io/qt-5/qml-qtgraphicaleffects-dropshadow.html#cached-prop