performanceqtqmlqt5.15

Swipview laggy on swiping


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

Solution

  • 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