Flickable and Button



  • I create a Flickable who has some Button,now when I flick,those Button always be pressed 。how to Shield Button when I flick?



  • Inserting Buttons inside a Flickable is not necessarily a good idea overall. What is your intent?



  • I want to create a page has button and can scroll up and down。Do you have some good advice?



  • That solely depends on what kind of other controls or data you want to show. Is there a point for being able to flick an almost empty page?



  • no,there is many control in it ,and what I want to made is when I flick shield the button.

    [quote author="Alek Śmierciak" date="1369638215"]That solely depends on what kind of other controls or data you want to show. Is there a point for being able to flick an almost empty page?[/quote]



  • my English is not very good...
    how to create a page that when I flick,the button not answer



  • Make use of onFlickStarted and onFlickEnded (or onMovementStarted and onMovementEnded)* signals of the "Flickable":http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-flickable.html element and disable the button click between those two signals.



  • I try but the mousearea visible doesn't work!



  • You said you want to use a Button and prevent accidental clicks on it. Why do you mention MouseArea, which is a different element?



  • I mean those Button MouseArea's "visible" propery does not work,e...
    can you write a simple example that a page contain some Button and some Text control,when flick the page Button does not answer



  • I'm getting a feeling that you have mistaken MouseArea with Button elements. Please show us your code so we can tell you what's wrong.



  • Base_Button_Have_Arrow.qml
    @
    import QtQuick 1.1

    Item {
    id: base_Button_Have_Arrow
    width: 460
    height: 60
    property string base_Arrow_Button_Name
    property string base_Arrow_Button_20_pixel_Text_Name_Right: ""
    property string base_Arrow_Button_20_pixel_Text_Name_Middle:""
    property int i_whichone: 0
    signal bechecked(int i_whichone)

        Image{
            id: base_Arrow_Button_BG
            width: parent.width
            height: 59
            source: "pic/base/Button_BG_460_59.png"
        }
        Image {
            id: base_Arrow_Button_BG_List_01
            x:0
            y:0
            width: parent.width
            height: 1
            source: "pic/base/ButtonListUnPressed.png"
        }
        Image {
            id: base_Arrow_Button_BG_List_02
            x : 0
            y : 59
            width: parent.width
            height: 1
            source: "pic/base/ButtonListUnPressed.png"
        }
        Text {
            id: base_Arrow_Button_Text
            x: 10
            y: 14
            font.pixelSize:30
            text: base_Arrow_Button_Name
            color: "white"
        }
        Image {
            id: base_Arrow_Button_Arrow
            x: 410
            y: 0
            width: 60
            height: 59
            source: "pic/base/ico_gen_ListArrow_30_b.png"
        }
        Text{
            id:base_Arrow_Button_20pixelText_Right
            x: 340
            y: 19
            font.pixelSize: 20
            text: base_Arrow_Button_20_pixel_Text_Name_Right
            color: "white"
    
        }
        Text{
            id:base_Arrow_Button_20pixel_Text_Name_Middle
            x: 200
            y: 19
            font.pixelSize: 20
            text: base_Arrow_Button_20_pixel_Text_Name_Middle
            color:"white"
        }
    
        MouseArea{
            id:mouse_area_arrow
            anchors.fill: parent
            onPressed: {
                base_Arrow_Button_BG.source = "pic/base/Button_BG_Pushed.png"
                base_Arrow_Button_BG_List_01.source = "pic/base/Base_List.bmp"
                base_Arrow_Button_BG_List_02.source = "pic/base/Base_List.bmp"
                base_Arrow_Button_Text.color = "#ce0052"
                base_Arrow_Button_20pixelText_Right.color = "#ce0052"
                base_Arrow_Button_20pixel_Text_Name_Middle.color = "#ce0052"
                base_Arrow_Button_Arrow.source = "pic/base/ico_gen_ListArrow_30_bg.png"
            
            }
            onReleased: {
                base_Arrow_Button_BG.source = "pic/base/Button_BG_460_59.png"
                base_Arrow_Button_BG_List_01.source = "pic/base/ButtonListUnPressed.png"
                base_Arrow_Button_BG_List_02.source = "pic/base/ButtonListUnPressed.png"
                base_Arrow_Button_Text.color = "white"
                base_Arrow_Button_20pixelText_Right.color = "white"
                base_Arrow_Button_20pixel_Text_Name_Middle.color = "white"
                base_Arrow_Button_Arrow.source = "pic/base/ico_gen_ListArrow_30_b.png"
                base_Button_Have_Arrow.bechecked(i_whichone)
            }
            hoverEnabled: true
        }
    

    }
    @

    Diag_Common_Settings_General.qml
    @
    import QtQuick 1.1

    Item {
    id: diag_Common_Settings_General
    width: 480
    height: 400
    Flickable {
    id: flick_DiagGeneral
    width: parent.width
    height: parent.height
    contentWidth: parent.width
    contentHeight: 610

        Text{
            id: diagCommonSettingGeneral_Displays
            x: 9
            y: 23
            text: "Brightness"
            font.pixelSize: 30
            color: "#ce0052"
            font.bold: true
        }
        Text{
            id: diagCommonSettingGeneral_MMC
            x: 9
            y: 85
            text: "MMC"
            font.pixelSize: 30
            color: "white"
        }
        Base_VolumeBar_10items{
            id:diagCommonSettingGeneral_10itemsVolumeBar
            x: 240
            y: 85
        }
        Image{
            id:diagCommonSettingGeneral_List_Gray
            x: 9
            y: 130
            width: 461
            height: 1
            source: "pic/base/Button_BG_460_59.png"
        }
    
        Text{
            id: diagCommonSettingGeneral_Instr_backlight
            x: 9
            y: 145
            text:"Instr&backlight"
            font.pixelSize: 30
            color: "white"
        }
        Base_VolumeBar_10items{
            id: diagCommonSettingGeneral_10iteamsVolumeBar_Instr
            x: 240
            y: 145
        }
        Text {
            id: diagCommonSettingGeneral_Sound
            x: 9
            y: 215
            text: "Sound"
            font.bold: true
            font.pixelSize: 30
            color: "#ce0052"
        }
        Base_Button_Have_Arrow{
            id: diagCommonSettingGeneral_Speed_sens_vol
            x: 9
            y: 261
            base_Arrow_Button_20_pixel_Text_Name_Right: "Medium"
            base_Arrow_Button_Name:"Speed sensitive vol."
        }
        Text {
            id: diagCommonSettingGeneral_System
            x: 9
            y: 345
            text: "System"
            font.pixelSize: 30
            color: "#ce0052"
            font.bold: true
        }
        Base_Button_Have_Arrow{
            id: diagCommonSettingGeneral_Button_MapInfo
            x: 9
            y : 391
            base_Arrow_Button_Name: "Map info"
    
        }
        Base_Diag_General_White_Button_MMCReset{
            id: diagCommonSettingGeneral_FacResetMMC
            x: 9
            y: 460
        }
        Base_Diag_General_White_Button_CarReset{
            id: diagCommonSettingGeneral_FacResetCar
            x: 9
            y: 530
        }
    
    }
    

    }
    @
    This is my previous code ,please...



  • Diag_Common_Settings_General.qml
    @import QtQuick 1.1

    Item {
    id: diag_Common_Settings_General
    width: 480
    height: 400
    Flickable {
    id: flick_DiagGeneral
    width: parent.width
    height: parent.height
    contentWidth: parent.width
    contentHeight: 610

        Text{
            id: diagCommonSettingGeneral_Displays
            x: 9
            y: 23
            text: "Brightness"
            font.pixelSize: 30
            color: "#ce0052"
            font.bold: true
        }
        Text{
            id: diagCommonSettingGeneral_MMC
            x: 9
            y: 85
            text: "MMC"
            font.pixelSize: 30
            color: "white"
        }
        Base_VolumeBar_10items{
            id:diagCommonSettingGeneral_10itemsVolumeBar
            x: 240
            y: 85
        }
        Image{
            id:diagCommonSettingGeneral_List_Gray
            x: 9
            y: 130
            width: 461
            height: 1
            source: "pic/base/Button_BG_460_59.png"
        }
    
        Text{
            id: diagCommonSettingGeneral_Instr_backlight
            x: 9
            y: 145
            text:"Instr&backlight"
            font.pixelSize: 30
            color: "white"
        }
        Base_VolumeBar_10items{
            id: diagCommonSettingGeneral_10iteamsVolumeBar_Instr
            x: 240
            y: 145
        }
        Text {
            id: diagCommonSettingGeneral_Sound
            x: 9
            y: 215
            text: "Sound"
            font.bold: true
            font.pixelSize: 30
            color: "#ce0052"
        }
        Base_Button_Have_Arrow{
            id: diagCommonSettingGeneral_Speed_sens_vol
            x: 9
            y: 261
            base_Arrow_Button_20_pixel_Text_Name_Right: "Medium"
            base_Arrow_Button_Name:"Speed sensitive vol."
        }
        Text {
            id: diagCommonSettingGeneral_System
            x: 9
            y: 345
            text: "System"
            font.pixelSize: 30
            color: "#ce0052"
            font.bold: true
        }
        Base_Button_Have_Arrow{
            id: diagCommonSettingGeneral_Button_MapInfo
            x: 9
            y : 391
            base_Arrow_Button_Name: "Map info"
    
        }
        Base_Diag_General_White_Button_MMCReset{
            id: diagCommonSettingGeneral_FacResetMMC
            x: 9
            y: 460
        }
        Base_Diag_General_White_Button_CarReset{
            id: diagCommonSettingGeneral_FacResetCar
            x: 9
            y: 530
        }
    
    }
    

    }@

    Base_Button_Have_Arrow.qml
    @import QtQuick 1.1

    Item {
    id: base_Button_Have_Arrow
    width: 460
    height: 60
    property string base_Arrow_Button_Name
    property string base_Arrow_Button_20_pixel_Text_Name_Right: ""
    property string base_Arrow_Button_20_pixel_Text_Name_Middle:""
    property int i_whichone: 0
    signal bechecked(int i_whichone)

        Image{
            id: base_Arrow_Button_BG
            width: parent.width
            height: 59
            source: "pic/base/Button_BG_460_59.png"
        }
        Image {
            id: base_Arrow_Button_BG_List_01
            x:0
            y:0
            width: parent.width
            height: 1
            source: "pic/base/ButtonListUnPressed.png"
        }
        Image {
            id: base_Arrow_Button_BG_List_02
            x : 0
            y : 59
            width: parent.width
            height: 1
            source: "pic/base/ButtonListUnPressed.png"
        }
        Text {
            id: base_Arrow_Button_Text
            x: 10
            y: 14
            font.pixelSize:30
            text: base_Arrow_Button_Name
            color: "white"
        }
        Image {
            id: base_Arrow_Button_Arrow
            x: 410
            y: 0
            width: 60
            height: 59
            source: "pic/base/ico_gen_ListArrow_30_b.png"
        }
        Text{
            id:base_Arrow_Button_20pixelText_Right
            x: 340
            y: 19
            font.pixelSize: 20
            text: base_Arrow_Button_20_pixel_Text_Name_Right
            color: "white"
    
        }
        Text{
            id:base_Arrow_Button_20pixel_Text_Name_Middle
            x: 200
            y: 19
            font.pixelSize: 20
            text: base_Arrow_Button_20_pixel_Text_Name_Middle
            color:"white"
        }
    
        MouseArea{
            id:mouse_area_arrow
            anchors.fill: parent
            onPressed: {
                base_Arrow_Button_BG.source = "pic/base/Button_BG_Pushed.png"
                base_Arrow_Button_BG_List_01.source = "pic/base/Base_List.bmp"
                base_Arrow_Button_BG_List_02.source = "pic/base/Base_List.bmp"
                base_Arrow_Button_Text.color = "#ce0052"
                base_Arrow_Button_20pixelText_Right.color = "#ce0052"
                base_Arrow_Button_20pixel_Text_Name_Middle.color = "#ce0052"
                base_Arrow_Button_Arrow.source = "pic/base/ico_gen_ListArrow_30_bg.png"
            
            }
            onReleased: {
                base_Arrow_Button_BG.source = "pic/base/Button_BG_460_59.png"
                base_Arrow_Button_BG_List_01.source = "pic/base/ButtonListUnPressed.png"
                base_Arrow_Button_BG_List_02.source = "pic/base/ButtonListUnPressed.png"
                base_Arrow_Button_Text.color = "white"
                base_Arrow_Button_20pixelText_Right.color = "white"
                base_Arrow_Button_20pixel_Text_Name_Middle.color = "white"
                base_Arrow_Button_Arrow.source = "pic/base/ico_gen_ListArrow_30_b.png"
                base_Button_Have_Arrow.bechecked(i_whichone)
            }
            hoverEnabled: true
        }
    

    }

    @



  • Those two posts contain the same source code, just a side note.

    Concerning your issue, you need to disable your inner "MouseArea":http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-mousearea.html, not make it invisible. Use "enabled":http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-mousearea.html#enabled-prop property.



  • OK! Thank you!!!
    I get off work, so I'll try tonight.
    Have a nice day !



  • Question be solved,a ha...


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.