Building a WebSite with Qt Quick and WASM

[1XU7]

Hi!..

I know WASM is not the better option to create a website, so i understand the risk...

I'm looking to create a scrollview with my Item{}s, for instance:

[ScrollView]
Item as rectangle
Buttons... as flat buttons
Image as main image
Label as title
Content 0
Content 1
....etc
[End ScrollView]

But when start my application in Qt Designer Studio, it does not scrolls, just keep stuck at top... i search for some tutorials but all of them are ListView oriented scrolling which works fine.

My Code:

/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QQProdiver

//Pagina del navegador
Rectangle {
    id: recPrincipal
    width: 1920
    height: 5000
    color: "#cccccc"

    ScrollView {
        id: scrlPrincipal
        x: 0
        y: 0
        width: recPrincipal.width
        height: recPrincipal.height

        //Boton Contacto
        Button {
            id: pbtContacto
            x: Window.width - 116
            width: 116
            height: 54
            flat: true
            highlighted: false
            y: 10
            z: 1

            Text {
                id: txtBtnContacto
                x: 20
                y: 13
                text: "Contacto"
                color: "#eeeeee"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 14
                minimumPixelSize: 14
            }
        }

        //Boton Linea de trabajo
        Button {
            id: pbtLineaTrabajo
            anchors.right: pbtContacto.left
            width: 175
            height: 54
            flat: true
            highlighted: false
            y: 8
            z: 1

            Text {
                id: txtBtnLineaTrabajo
                x: 20
                y: 13
                text: "Línea de trabajo"
                color: "#eeeeee"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 14
                minimumPixelSize: 14
            }
        }

        //Boton Capacitacion
        Button {
            id: pbtCapacitacion
            anchors.right: pbtLineaTrabajo.left
            width: 150
            height: 54
            flat: true
            highlighted: false
            y: 8
            z: 1

            Text {
                id: txtBtnCapacitacion
                x: 20
                y: 13
                text: "Capacitación"
                color: "#eeeeee"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pointSize: 14
                minimumPixelSize: 14
            }
        }

        //Boton Inicio
        Button {
            id: pbtHome
            anchors.right: pbtCapacitacion.left
            font.family: "Arial"
            width: 120
            height: 54
            flat: true
            highlighted: false
            y: 8
            z: 1

            //onClicked: txtBtnHome.color = "#aaaaaa"
            Text {
                id: txtBtnHome
                x: 33
                y: 17
                text: "Home"
                color: "#eeeeee"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.family: "Arial"
                font.pointSize: 14
                minimumPixelSize: 14
            }
        }

        //Imagen de portada
        Image {
            id: imgPortada
            source: "images/0_0.png"
            x: Window.width / 2 - imgPortada.width / 2
            y: 0

            //Fondo semitrasnparent para recalcar logo y titulos
            Rectangle {
                id: recFondoCentralPortada
                width: 700
                height: imgPortada.height
                color: "#4d001141"
                x: Window.width / 2 - 350
            }

            //Logo
            Image {
                id: imgLogo
                source: "images/0_0_logo.png"
                width: 200
                height: 200
                x: Window.width / 2 - 100
                y: imgPortada.height / 2 - 200
            }

            //Titulos
            Label {
                id: lblPortada
                width: 1100
                height: 200
                x: Window.width / 2 - lblPortada.width / 2
                y: imgPortada.height / 2 - 0

                Text {
                    id: txtPortadaTitulo
                    x: 0
                    y: 0
                    width: parent.width
                    height: 100
                    text: "PRODIDER"
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 45
                    font.bold: true
                    color: "#eeeeee"
                }

                Text {
                    id: txtPortadaSlogan
                    x: 0
                    y: 100
                    width: parent.width
                    height: 70
                    text: "Profesionales del buceo"
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 35
                    font.bold: true
                    color: "#aaaaaa"
                }
            }
        }

        //Seccion 0 (Instructores Profesionales)
        Rectangle {
            id: recSeccion0
            anchors.left: recPrincipal.left
            y: imgPortada.height
            width: Window.width
            height: 500
            color: "#dddddd"

            //Imagen izquierda
            Image {
                id: imgSeccion0_0
                x: parent.width * .15
                y: parent.height * .1
                source: "images/0_1b.png"
                width: 476
                height: 392
            }

            //Contenido derecho (Titulo y texto)
            Label {
                id: lblSeccion0
                x: 850
                y: 100
                width: 805
                height: 340

                Text {
                    id: txtSeccion0_Titulo
                    x: 0
                    y: 0
                    width: 805
                    height: 70
                    text: "Instructores Profesionales"
                    horizontalAlignment: Text.AlignRight
                    font.pointSize: 40
                    font.bold: true
                    color: "#777777"
                }

                Text {
                    id: txtSeccion0_Articulo
                    y: txtSeccion0_Titulo.height + 20
                    width: 800
                    text: "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n<html><head><meta name=\"qrichtext\" content=\"1\" /><meta charset=\"utf-8\" /><style type=\"text/css\">\np, li { white-space: pre-wrap; }\nhr { height: 1px; border-width: 0; }\nli.unchecked::marker { content: \"\\2610\"; }\nli.checked::marker { content: \"\\2612\"; }\n</style></head><body style=\" font-family:'Segoe UI'; font-size:9pt; font-weight:400; font-style:normal;\">\n<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; line-height:166.8%;\"><span style=\" font-family:'Constantia'; font-size:14pt; color:#999999; background-color:transparent;\">En </span><span style=\" font-family:'Constantia'; font-size:14pt; font-weight:700; color:#282828; background-color:transparent;\">PRODIVER</span><span style=\" font-family:'Constantia'; font-size:14pt; font-weight:700; color:#999999; background-color:transparent;\"> </span><span style=\" font-family:'Constantia'; font-size:14pt; color:#999999; background-color:transparent;\">nos enfocamos en dar soluciones reales en el área de Formación y Capacitación. También entregamos Servicios de Buceo, Inspección Técnica y Mantenimiento Submarino. </span></p>\n<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; line-height:166.8%;\"><span style=\" font-family:'Constantia'; font-size:14pt; color:#999999; background-color:transparent;\">Contamos con un equipo de profesionales expertos en las diferentes áreas del buceo, quienes trabajan permanentemente en perfeccionar las técnicas y entregar sus conocimientos de manera que el buceo sea una experiencia ordenada y segura. Nos respaldan más de 15 años de experiencia en el mar, somos profesionales del buceo.</span></p></body></html>"
                    horizontalAlignment: Text.AlignJustify
                    wrapMode: Text.WordWrap
                    textFormat: Text.RichText
                    font.pointSize: 20
                    font.bold: true
                    color: "#999999"
                }
            }
        }

        //Seccion 1 (Nuestros Clientes)
        Rectangle {
            id: recSeccion1
            anchors.left: recPrincipal.left
            y: imgPortada.height + recSeccion0.height
            width: Window.width
            height: 600
            color: "#cbcbcb"

            Label {
                id: lblSeccion1
                x: 0
                y: 50
                width: 1920
                height: 70

                Text {
                    id: txtSeccion1_Titulo
                    x: recSeccion1.width / 2 - txtSeccion1_Titulo.width / 2
                    y: 0
                    width: 461
                    height: 70
                    text: "Nuestros Clientes"
                    horizontalAlignment: Text.AlignHCenter
                    font.pointSize: 40
                    font.bold: true
                    color: "#777777"
                }
            }

            //Ficha Multi X
            Rectangle {
                id: recSeccion1_Ficha0
                x: parent.width * .05
                y: parent.height * .3
                width: 200
                height: 300
                radius: 20
                //border.color: "#bbbbb"
                //border.width: 1
                color: "#dedede"

                Image {
                    id: imgSeccion1_0
                    x: 0
                    y: 0
                    width: parent.width
                    height: parent.height * .65
                    source: "images/0a.png"
                }

                Label {
                    id: lblSeccion1_Ficha0
                    width: parent.width
                    height: 30
                    x: imgSeccion1_0.width / 2 - lblSeccion1_Ficha0.width / 2
                    y: imgSeccion1_0.height + 10

                    Text {
                        x: 0
                        y: 0
                        width: 200
                        height: 33
                        text: "Multi X"
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignHCenter
                        color: "#888888"

                    }
                }

                Button {
                    id: pbtSeccion1_Ficha0
                    width: 230
                    height: 60
                    text: "Visitar"
                    flat: false

                    x: imgSeccion1_0.width / 2 - pbtSeccion1_Ficha0.width / 2
                    y: imgSeccion1_0.height + lblSeccion1_Ficha0.height + 30

                }

            }

            //Ficha Salmones Australes
            Rectangle {
                id: recSeccion1_Ficha1
                x: parent.width * .05 + recSeccion1_Ficha0.width + 50
                y: parent.height * .3
                width: 200
                height: 300
                radius: 20
                border.width: 0
                color: "#dedede"

                Image {
                    id: imgSeccion1_1
                    x: 0
                    y: 0
                    width: parent.width
                    height: parent.height * .65
                    source: "images/0b.png"
                }

                Label {
                    id: lblSeccion1_Ficha1
                    width: parent.width
                    height: 30
                    x: imgSeccion1_1.width / 2 - lblSeccion1_Ficha1.width / 2
                    y: imgSeccion1_1.height + 10

                    Text {
                        x: 0
                        y: 0
                        width: 200
                        height: 33
                        text: "Salmones Austral"
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignHCenter
                        color: "#888888"

                    }
                }

                Button {
                    id: pbtSeccion1_Ficha1
                    width: 230
                    height: 60
                    text: "Visitar"
                    flat: false

                    x: imgSeccion1_1.width / 2 - pbtSeccion1_Ficha1.width / 2
                    y: imgSeccion1_1.height + lblSeccion1_Ficha1.height + 30

                }

            }

            //Ficha Salmones Yadran
            Rectangle {
                id: recSeccion1_Ficha2
                x: recSeccion1_Ficha1.x + recSeccion1_Ficha1.width + 50
                y: parent.height * .3
                width: 200
                height: 300
                radius: 20
                border.width: 0
                color: "#dedede"

                Image {
                    id: imgSeccion1_2
                    x: 0
                    y: 0
                    width: parent.width
                    height: parent.height * .65
                    source: "images/0c.png"
                }

                Label {
                    id: lblSeccion1_Ficha2
                    width: parent.width
                    height: 30
                    x: imgSeccion1_2.width / 2 - lblSeccion1_Ficha2.width / 2
                    y: imgSeccion1_2.height + 10

                    Text {
                        x: 0
                        y: 0
                        width: 200
                        height: 33
                        text: "Salmones Yadran"
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignHCenter
                        color: "#888888"

                    }
                }

                Button {
                    id: pbtSeccion1_Ficha2
                    width: 230
                    height: 60
                    text: "Visitar"
                    flat: false

                    x: imgSeccion1_2.width / 2 - pbtSeccion1_Ficha2.width / 2
                    y: imgSeccion1_2.height + lblSeccion1_Ficha2.height + 30

                }

            }




        }
    }
}