qml listview resize leads to content change in large screen

yupengfei

My qml

import QtQuick 2.8
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    MouseArea {
        anchors.fill: parent
        onClicked: {
            mainAreaView.currentIndex = 2
        }
    }

    Rectangle {
        width: 200
        height: parent.height
        anchors.left: parent.left
        ListView {
            id: mainAreaView
            width: parent.width
            height: parent.height
            interactive:false
            model:mainItemModel
            currentIndex: 0
            clip: true
            snapMode: ListView.SnapToItem
            orientation: ListView.Vertical
            highlightMoveDuration: 10
            onCurrentItemChanged: {
                console.log("mainAreaView current item changed to ", currentIndex)
            }
            onCurrentIndexChanged: {
                console.log("mainAreaView current index changed to ", currentIndex)
            }
        }
        VisualItemModel {
            id: mainItemModel
            Rectangle {
                width: mainAreaView.width
                height: mainAreaView.height
                color: "blue"
            }

            Rectangle {
                width: mainAreaView.width
                height: mainAreaView.height
                color: "red"
            }

            Rectangle {
                width: mainAreaView.width
                height: mainAreaView.height
                color: "green"
            }

            Rectangle {
                width: mainAreaView.width
                height: mainAreaView.height
                color: "black"
            }
        }
    }
}

After startup, click the mouse leads the Rectangle to green

After click the maximize button，the Rectangle turned red on large screen with Resolution 2560*1440。

But at Resolution 1024*600, everything work fine.

Does anyone have an idea?