Flickable and Button

Alek Śmierciak

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.

the difference is documented "here":http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-flickable.html#onFlickEnded-signal.

ThanksMoon

I try but the mousearea visible doesn't work!

Alek Śmierciak

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

ThanksMoon

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

Alek Śmierciak

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.

ThanksMoon

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...

ThanksMoon

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
    }

}

@

Alek Śmierciak

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.

ThanksMoon

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

ThanksMoon

Question be solved,a ha...