Flickable and Button

ThanksMoon

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

Alek Śmierciak

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?

ThanksMoon

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]

ThanksMoon

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

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