Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 3 Support (Qt 5) › SwipeView has disabled the rest of the components

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #24996

    Victor Manuel

    SwipeView has disabled the rest of the components, it won’t let me interact with them…

    import QtQuick 2.15
    import QtQuick.Controls 2.15
    import Felgo 3.0
    
    import '../js/Login.js' as Login
    
    Page {
        id: login
        title: qsTr('Autenticar')
        navigationBarHidden: true
    
        Rectangle {
            id: back
            anchors.fill: parent
    
            AppImage {
                anchors.fill: parent
                defaultSource: Qt.resolvedUrl('../assets/images/back.png')
            }
    
            Rectangle {
                id: loginForm
                anchors.centerIn: parent
                color: Qt.rgba(0,0,0, 0.45)
                width: loginTab.width + dp(70)
                height: loginTab.height + dp(40)
                radius: dp(20)
    
                AppTabBar {
                    id: loginTab
                    anchors.centerIn: parent
                    contentContainer: container
                    translucency: 1
                    spacing: dp(10)
                    width: dp(400)
                    height: dp(350)
    
                    AppTabButton {
                        text: "Telefono"
                        contentItem: AppText {
                            text: parent.text
                            font: parent.font
                            color: '#ffffff'
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight
                        }
                        Rectangle {
                            anchors.fill: parent
                            color: 'transparent'
                            border.width: parent.selected ? dp(3) : dp(1)
                            border.color: '#ffffff'
                            radius: dp(10)
                        }
                        onSelectedChanged: {
                            selected ? sessionButton.enabled = false : sessionButton.enabled = true
                        }
                    }
                    AppTabButton {
                        text: "Correo electronico"
                        contentItem: AppText {
                            text: parent.text
                            font: parent.font
                            color: '#ffffff'
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight
                        }
                        Rectangle {
                            anchors.fill: parent
                            color: 'transparent'
                            border.width: parent.selected ? dp(3) : dp(1)
                            border.color: '#ffffff'
                            radius: dp(10)
                        }
                    }
                    AppTabButton {
                        text: "Redes sociales"
                        contentItem: AppText {
                            text: parent.text
                            font: parent.font
                            color: '#ffffff'
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            elide: Text.ElideRight
                        }
                        Rectangle {
                            anchors.fill: parent
                            color: 'transparent'
                            border.width: parent.selected ? dp(3) : dp(1)
                            border.color: '#ffffff'
                            radius: dp(10)
                        }
                        onSelectedChanged: {
                            selected ? sessionButton.enabled = false : sessionButton.enabled = true
                        }
                    }
                }
    
                SwipeView {
                    id: container
                    width: parent.width
                    height: parent.height
                    clip: false
    
                    Rectangle {
                        color: 'transparent'
                        Column {
                            id: formLoginPhone
                            anchors.centerIn: parent
                            spacing: dp(10)
    
                            AppText {
                                id: textPhone
                                text: 'Telefono'
                                color: '#ffffff'
                                font.pixelSize: dp(20)
                            }
                            AppTextField {
                                id: fieldPhone
                                showClearButton: true
                                font.pixelSize: sp(14)
                                color: '#ffffff'
                                borderColor: '#ffffff'
                                borderWidth: dp(2)
                                radius: dp(10)
                                width: dp(280)
                                height: dp(60)
                                leftPadding: dp(140)
                                ComboBox {
                                    id: phonePrefix
                                    width: dp(120)
                                    height: dp(60)
                                    font.pixelSize: sp(18)
                                    model: ListModel {
                                        dynamicRoles: true
                                    }
                                    background: Rectangle {
                                        anchors.fill: parent
                                        color: 'transparent'
                                        radius: dp(10)
                                    }
                                }
                                onTextChanged: {
                                    Login.validatePhone(phonePrefix.currentText+text);
                                }
                                onTextEdited: {
                                    Login.phoneLogin(phonePrefix.currentText+text)
                                }
                            }
    
                            AppText {
                                id: textCode
                                text: 'Codigo'
                                color: '#ffffff'
                                font.pixelSize: dp(20)
                                visible: false
                            }
                            AppTextField {
                                id: fieldCode
                                showClearButton: true
                                font.pixelSize: sp(14)
                                color: '#ffffff'
                                borderColor: '#ffffff'
                                borderWidth: dp(2)
                                radius: dp(10)
                                width: dp(280)
                                height: dp(60)
                                leftPadding: dp(10)
                                visible: false
                            }
                        }
                    }
                    Rectangle {
                        color: 'transparent'
                        Column {
                            id: formLoginEmail
                            anchors.centerIn: parent
                            spacing: dp(10)
    
                            AppText {
                                id: textEmail
                                text: 'Usuario'
                                color: '#ffffff'
                                font.pixelSize: dp(20)
                            }
                            AppTextField {
                                id: fieldEmail
                                showClearButton: true
                                font.pixelSize: sp(14)
                                color: '#ffffff'
                                borderColor: '#ffffff'
                                borderWidth: dp(2)
                                radius: dp(10)
                                width: dp(280)
                                height: dp(60)
                                leftPadding: dp(10)
                                onTextChanged: {
                                    Login.validateEmail(text);
                                }
                            }
    
                            AppText {
                                id: textPassword
                                text: 'Contrasena'
                                color: '#ffffff'
                                font.pixelSize: dp(20)
                            }
                            AppTextField {
                                id: fieldPassword
                                echoMode: 'Password'
                                showClearButton: true
                                font.pixelSize: sp(14)
                                color: '#ffffff'
                                borderColor: '#ffffff'
                                borderWidth: dp(2)
                                radius: dp(10)
                                width: dp(280)
                                height: dp(60)
                                leftPadding: dp(10)
                                onTextChanged: {
                                    Login.validatePassword(text);
                                }
                            }
                        }
    
                    }
                    Rectangle {
                        color: 'transparent'
                        Row {
                            id: formSocialNetwork
                            anchors.centerIn: parent
                            spacing: dp(60)
                            IconButton {
                                id: googleLogin
                                icon: IconType.google
                                color: '#ffffff'
                                size: dp(50)
                                onClicked: {
                                }
                            }
                            IconButton {
                                id: facebookLogin
                                icon: IconType.facebook
                                color: '#ffffff'
                                size: dp(50)
                                onClicked: {
    
                                }
                            }
                            IconButton {
                                id: twitterLogin
                                icon: IconType.twitter
                                color: '#ffffff'
                                size: dp(50)
                                onClicked: {
    
                                }
                            }
                        }
                    }
                }
            }
    
            Column {
                anchors.bottom: parent.bottom
                anchors.bottomMargin: dp(50)
                spacing: dp(2)
                width: parent.width
    
                AppButton {
                    id: sessionButton
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: 'Iniciar sesion'
                    textSize: dp(18)
                    textColor: '#ffffff'
                    radius: dp(5)
                    width: dp(200)
                    height: dp(60)
                    backgroundColor: '#1a2537'
                    backgroundColorPressed: '#1a2537'
                    onClicked: {
                        switch(container.currentIndex) {
                        case 0:
                            Login.verifyPhonePin(fieldPhone.text, fieldCode.text)
                            break;
                        case 1:
                            Login.mailLogin(fieldEmail.text, fieldPassword.text)
                            break;
                        }
                    }
                }
    
                AppButton {
                    id: registerButton
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: qsTr("No recuerdas la contresena? Recuperala")
                    textColor: '#1a2537'
                    textColorPressed: '#1a2537'
                    textSize: dp(15)
                    flat: true
                    onClicked: {
                        initStack.push(recoveryPage)
                    }
                }
            }
        }
    
        Component {
            id: mapPage
            Mapa {}
        }
        Component {
            id: recoveryPage
            RecoveryPassword {}
        }
    }
    

     

    #24999

    Alex
    Felgo Team

    Hi Victor,

    please refer to https://felgo.com/doc/felgo-apptabbar/#example-usage for correct usage of AppTabBar with a SwipeView.

    In your example, your AppTabBar fills the whole height and overlaps with the SwipeView. Instead, please remove the height of the AppTabBar. The AppTabBar are only the row of controls, the SwipeView is the content that should fill the space. So e.g. just define the height of your “loginForm” item, remove the height of your “loginTab” and only use anchors.horizontalCenter: parent.horizontalCenter on the “loginTab”.

    Best,
    Alex

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded