[Edward]

Hey Guys,

I’m working on a page which consists of several image rows, the page itself is flickable and works as intended however the rows (which should be horizontally flickable) return to their start point when I release the mouse/touch and do not scroll further.

 

I initially had all code on one page but since moved the horizontal flickable to an alternate page to see if that helped but this is not the case – see code of both pages below!

 

****HOMEPAGE****

import QtQuick 2.0
import Felgo 3.0
import "Components"

Page {
    id: page
    title: "EXPLORE"

    property var arr: ["Hairstylists", "Makeup Artists", "Clothes Stylists", "Photographers", "Models", "Videograpehrs", "Locations"]
    property var testImageSource: "https://payload.cargocollective.com/1/10/333868/13868492/6496-20-005-f2_670.jpeg"


    AppFlickable {
        anchors.fill: parent
        contentHeight: content.height

        Column {
            id: content
            width: parent.width
            Rectangle {
                width: parent.width
                height: dp(Theme.navigationBar.height)
            }
            Repeater {
                id: repeater
                model: arr.length
                Rectangle {
                    width: parent.width
                    height: page.height /3
                    Column {
                        id: contentCol
                        width: parent.width
                        height: parent.height
                        AppText {
                            id: titleText
                            width: page.width
                            text: "<b>"+arr[index] + "   >"
                            leftPadding: dp(15)
                            bottomPadding: dp(15)
                            MouseArea {
                                anchors.fill: parent
                                onClicked: exploreModal.open()
                            }
                        }
                      HomeFlickable {

                      }
                    }
                }
            }
        }
    }
    AppModal {
        id: exploreModal
        fullscreen: true
        pushBackContent: navigationRoot
        NavigationStack {
            Explore {
                title: "EXPLORE"
                clip: true
                rightBarItem: TextButtonBarItem {
                    text: "Close"
                    textItem.font.pixelSize: sp(16)
                    onClicked: exploreModal.close()
                }
            }
        }
    }
}

 

 

 

****FLICKABLEPAGE****

import QtQuick 2.0
import Felgo 3.0

FlickablePage {
    id: item
    flickable.contentHeight: contentRow.height
    scrollIndicator.visible: false
    flickable.flickableDirection: AppFlickable.HorizontalFlick

    property var testImageSource: "https://payload.cargocollective.com/1/10/333868/13868492/6496-20-005-f2_670.jpeg"

        Row {
            id: contentRow
            width: parent.width
            Repeater {
                model: 5
                AppImage {
                    height: width
                    width: item.width /2.2
                    scale: 0.8
                    fillMode: Image.PreserveAspectFit
                    source: testImageSource
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {}
                    }
                }
            }
        }

}

 

[Edward]

Don’t mind me! In typical fashions solved it within 3 seconds of posting this –

Being a horizontal scroll i wasn’t defining my flickable.contentWidth: contentRow.width, also i removed the ‘width’ property from my row and works as intended!