滑动时 Swipview 卡顿

Question

我的 qml 代码性能有问题，在“收件箱”和“我的盒子”之间滑动时卡顿，代码很简单但是... 好的，这是我的代码，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
}
}

我有不管cpp代码呢！主要是代码：| 我认为 Box.qml 必须优化，或者可能是因为 MyBoxes.ui.qml 中的长文本问题或者我应该更改编译配置，这里是 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

Answer 1

您可以尝试在 DropShadow 上设置 cached: true:

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

滑动时 Swipview 卡顿

Swipview laggy on swiping

performance

qt

qml

qt5.15