Changing orientation: ListView.Vertical to orientation: ListView.Horizontal



  • Hi,
    I have developed an application using QtQuick for android devices.

    I have a Vertical ListView in my application which I would like to change to be a Horizontal one.
    But when I change the following line:

    orientation: ListView.Vertical
    

    to

    orientation: ListView.Horizontal 
    

    and start the application, I only see a black screen and nothing else.
    What is going on? I have been trying everything for a couple of hours and also searched the whole internet and all reported bugs and still nothing. How could changing one line of code have such an impact?

    I have also updated and I am now using the latest of everything. Android SDK, Qt release 5.7 running on an Nexus tablet with latest Android release.

    I am also adding the ListView but it is basically a simple one, consisting of images and mouse area.

    ListView {
        id: buttonMenu
    
        clip: true
    
        width: parent.width
        height: root.height / 5
    
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 15
    
        anchors.left: parent.left
        anchors.leftMargin: 12
    
        anchors.right: parent.right
        anchors.rightMargin: 12
    
        orientation: ListView.Horizontal
        spacing: 10
    
        focus: true
    
        model: ListModel {
            //0
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/forest.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/forest.jpg"
            }
    
            //1
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/raindrops.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/raindrops.jpg"
            }
    
            //2
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/winter.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/winter.jpg"
            }
    
            //3
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/energize.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/energize.png"
            }
    
            //4
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/autumn.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/autumn.jpg"
            }
    
            //5
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/lavender1.jpg"
                bigPicSource:   "file:///storage/emulated/0/Download/lavender.jpg"
            }
    
            //6
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/stars.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/stars.jpg"
            }
    
            //7
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/sky.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/sky.jpg"
            }
    
            //8
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/northenLight.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/northenLight.jpg"
            }
    
            //9
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/fireplace.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/fireplace.jpg"
            }
    
            //10
            ListElement {
                picSource:      "file:///storage/emulated/0/Download/underwater.gif"
                bigPicSource:   "file:///storage/emulated/0/Download/underwater.jpeg"
            }
        }
    
        delegate: MouseArea {
            id:myDelegate
            width: parent.height
            height: width
    
            AnimatedImage {
                id: smallImage
                anchors.centerIn: parent
                width: parent.width - 20
                height: parent.height - 20
                source: picSource
                fillMode: Image.PreserveAspectCrop
                smooth: true
                visible: true
                opacity: 1
            }
            HueSaturation {
                anchors.fill: smallImage
                source: smallImage
                saturation: -0.8
            }
    
            Text {
                id: smallItemText
    
                height: smallImage.height
                width: smallImage.width
                anchors.top: smallImage.top
    
                anchors.horizontalCenter: smallImage.horizontalCenter
    
                horizontalAlignment: Text.AlignHCenter
                text: name
                font.pixelSize: 50
                font.family: myCustomFont.name
                font.weight: Font.Light
                color:"white"
                wrapMode: Text.WordWrap
    
                visible: false
            }
    
    
            Rectangle {
                id: selectedRect
                anchors.centerIn: smallImage
                width: smallImage.width + 10
                height: smallImage.height + 10
                color: "transparent"
                border.width: 5
                border.color: "white"
                visible:index == buttonMenu.currentIndex ? true:false
            }
    
            onClicked: {
    
                buttonMenu.currentIndex = index
                particles.running = true
    
                toImg.visible = true
                toImageSrc = bigPicSource
            }
        } // End of Delegate
    } // End of ListView
    


  • Hi! Would be great if you could put together a minimal example to reproduce this and then file a bug report at bugreports.qt.io :-)