[Victor Manuel]

I have a page with a paper as a child, within this a flickable with several children to create a form, but the scroll indicator of the flickable does not work

[AlexFelgo Team]

Hi Victor,

could you describe “does not work” a little more? What is the issue that you are experiencing? Does it not who up, or show up wrong, or anything else? If you could also create a minimal example that reproduces the issue and post it here (using the “Code” button here in the editor), it would also help to investigate this faster.

Best,
Alex

[Victor Manuel]

Hi, Alex. Thanks for answering. I have been working with Qt for several years, but I am really new to the use of QML/Felgo, but with Felgo I have had a great advance in a very short time in my opinion.

The ScrollIndicator stops working when multiple items are inserted into the content. I tried to use ScrollBar.vertical but when the page is popped it stops working too.

This it’s my code

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.LocalStorage 2.15
import Felgo 3.0

import '../js/DatComite.js' as DatComite
import '../js/NomProvincia.js' as NomProvincia
import '../js/NomMunicipio.js' as NomMunicipio

Page {
    id: addComite
    title: qsTr("Registrar CDR")
    backNavigationEnabled: false
    backgroundColor: '#255dd3'

    property bool validate: false

    Component.onCompleted: {
        Theme.navigationBar.backgroundImageSource = Qt.resolvedUrl('../assets/images/navigationBarImageBack.png')
        NomProvincia.chargeNomProvincia(stateField.model);
        stateField.currentIndex = 0;
        cityField.model.append({denominacion: 'Seleccione...'});
        cityField.currentIndex = 0;
    }

    rightBarItem: NavigationBarRow {
        IconButtonBarItem {
            icon: IconType.close
            onClicked: {
                initStack.popAllExceptFirstAndPush(comitePage)
            }
        }
    }

    AppPaper {
        id: backPaper
        anchors.top: parent.top
        anchors.centerIn: parent.Center
        height: parent.height+dp(5)
        radius: dp(50)

        AppPaper {
            id: formPaper
            anchors.top: parent.top
            anchors.topMargin: dp(10)
            radius: dp(50)
            x: dp(10)
            width: parent.width-dp(20)
            height: parent.height-dp(25)
            Rectangle {
                anchors.fill: parent
                color: '#255dd3'
                radius: dp(50)
            }

            Flickable {
                id: flickable
                anchors.fill: parent
                anchors.topMargin: dp(5)
                contentHeight: content.height
                focus: true

//                ScrollBar.vertical: ScrollBar {
//                    parent: flickable.parent
//                    anchors.top: flickable.top
//                    anchors.right: flickable.right
//                    anchors.bottom: flickable.bottom
//                    hoverEnabled: true
//                    active: hovered || pressed
//                    size: content.height
//                }

                Column {
                    id: content
                    width: parent.width
                    height: parent.height
                    spacing: 10
                    padding: 10

                    AppText {
                        id: textNumberField
                        anchors.top: parent.top
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'CDR No. *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: numberField
                        anchors.top: textNumberField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[0-9]+/
                        }
                    }

                    AppText {
                        id: textNameField
                        anchors.top: numberField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Nombre *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: nameField
                        anchors.top: textNameField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[A-ZÑa-zñáéíóúÁÉÍÓÚ'° ]+/
                        }
                    }

                    AppText {
                        id: textZoneField
                        anchors.top: nameField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Zona No. *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: zoneField
                        anchors.top: textZoneField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[0-9]+/
                        }
                    }

                    AppText {
                        id: textCircunscriptionField
                        anchors.top: zoneField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(60)
                        height: dp(30)
                        text: 'Circunscripcion No. *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: circunscriptionField
                        anchors.top: textCircunscriptionField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[0-9]+/
                        }
                    }

                    AppText {
                        id: textAreaField
                        anchors.top: circunscriptionField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Area No. *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: areaField
                        anchors.top: textAreaField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[0-9]+/
                        }
                    }

                    AppText {
                        id: textStateField
                        anchors.top: areaField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Provincia *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    ComboBox {
                        id: stateField
                        anchors.top: textStateField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        model: ListModel {
                            dynamicRoles: true
                        }
                        font.pixelSize: sp(18)
                        Rectangle {
                            id: rectStateField
                            anchors.fill: stateField
                            color: '#ffffff'
                            border.color: '#ffffff'
                            border.width: dp(2)
                            radius: dp(10)
                        }
                        onActivated: {
                            cityField.model.clear();
                            NomMunicipio.chargeNomMunicipio(stateField.currentText, cityField.model);
                            cityField.currentIndex = 0;
                        }
                    }

                    AppText {
                        id: textCityField
                        anchors.top: stateField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Municipio *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    ComboBox {
                        id: cityField
                        anchors.top: textCityField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        font.pixelSize: sp(18)
                        model: ListModel {
                            dynamicRoles: true
                        }
                        Rectangle {
                            id: rectCityField
                            anchors.fill: cityField
                            color: '#ffffff'
                            border.color: '#ffffff'
                            border.width: dp(2)
                            radius: dp(10)
                        }
                    }

                    AppText {
                        id: textBaseField
                        anchors.top: cityField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Base No.'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: baseField
                        anchors.top: textBaseField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[0-9]+/
                        }
                    }

                    AppText {
                        id: textBaseNameField
                        anchors.top: baseField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Nombre base'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: baseNameField
                        anchors.top: textBaseNameField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        placeholderTextColor: 'red'
                        showClearButton: true
                        validator: RegExpValidator {
                            regExp: /[A-ZÑa-zñáéíóúÁÉÍÓÚ'° ]+/
                        }
                    }

                    AppText {
                        id: textAddressField
                        anchors.top: baseNameField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Direccion *'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    Rectangle {
                        id: rectAddressField
                        anchors.top: textAddressField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        color: '#ffffff'
                        border.color: '#ffffff'
                        border.width: dp(2)
                        radius: dp(10)
                        width: parent.width-dp(80)
                        height: dp(130)
                        AppTextEdit {
                            id: addressField
                            anchors.fill: parent
                            anchors.topMargin: dp(5)
                            anchors.leftMargin: dp(5)
                            anchors.rightMargin: dp(5)
                            anchors.bottomMargin: dp(5)
                            color: '#000000'
                            placeholderColor: 'red'
                        }
                    }

                    AppText {
                        id: textReferenceField
                        anchors.top: rectAddressField.bottom
                        anchors.topMargin: dp(10)
                        width: parent.width-dp(80)
                        height: dp(30)
                        text: 'Referencia'
                        color: '#ffffff'
                        fontSize: sp(8)
                        font.bold: true
                        leftPadding: dp(50)
                    }
                    AppTextField {
                        id: referenceField
                        anchors.top: textReferenceField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(5)
                        width: parent.width-dp(80)
                        height: dp(60)
                        backgroundColor: '#ffffff'
                        borderColor: '#ffffff'
                        borderWidth: dp(2)
                        radius: dp(10)
                        showClearButton: true
                        IconButton {
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            icon: IconType.camera
                            onClicked: {
                                nativeUtils.displayCameraPicker()
//                                initStack.push(takePhotoPage);
                            }
                        }
                    }

                    AppButton {
                        anchors.top: referenceField.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.topMargin: dp(20)
                        text: 'Confirmar'
                        textSize: sp(20)
                        fontCapitalization: 0
                        backgroundColor: '#5bb764'
                        radius: dp(20)
                        width: dp(250)
                        height: dp(60)
                        onClicked: {
                            DatComite.validateField();
                            if (validate == true) {
                                var idprovincia = NomProvincia.searchIdNomProvincia(stateField.currentText);
                                var idmunicipio = NomMunicipio.searchIdNomMunicipio(cityField.currentText);

                                DatComite.addComite(numberField.text,
                                                    nameField.text,
                                                    zoneField.text,
                                                    circunscriptionField.text,
                                                    areaField.text,
                                                    idprovincia,
                                                    idmunicipio,
                                                    baseField.text,
                                                    baseNameField.text,
                                                    addressField.text,
                                                    referenceField.text);

                                initStack.popAllExceptFirstAndPush(comitePage);
                            }
                        }
                    }
                }
            }

            ScrollIndicator {
                flickable: flickable
            }
        }
    }

    Connections {
        target: nativeUtils
        onCameraPickerFinished: {
            if (accepted) {
                referenceField.text = path
            }
        }
    }
}

 

[AlexFelgo Team]

Hi,

the Problem in your example is that you are breaking the Column layout by using anchors.top and anchors.topMargin for its children. This results in the Column having no size.
A Column will layout its children vertically after each other, you can only use anchors for horizontal positioning (left, right, horizontalCenter).

Also you have specified the height of the Column to be parent.height, this is not what you want, you want it’s height to be the sum of its children (which the Column will have by default), so remoge the height definition from the Column.

If you remove anchors.top and anchors.topMargin from all the direct children of the Column, and the height from the Column, the scrollbar will show up and the Flickable can be scrolled correctly.

Best,
Alex