Extend SectionHeader with onclick event or longpress event

Applications QML
1

Hi
i try to implement on sectionheader with onclick or longpress but when

adding something like this into the Column with other SectionHeaders this one will not be shown

        **Item** {                

            *// Top Artists Section*

            **SectionHeader** {  // << wont be shown

                id: topArtistsHeader

                visible: applicationWindow.settings.topartistList

                text: **qsTr**("Top Artists")

            }

            property **bool** showFilterArtist

            **MouseArea** {

                anchors.fill: topArtistsHeader

                onClicked: mainColumn.showFilterArtist = !mainColumn.showFilterArtist

            }

        }

       **SectionHeader** {

            text: **qsTr**("Recently played")  // <<  visible

            visible: applicationWindow.settings.recentList

        }



        **HorizontalList** {

            id: recentList

            visible: applicationWindow.settings.recentList

        }
2

Are you using an Item as the container? AFAIK Items have zero width and height per default so that may be a reason.

You probably can simplify with

SectionHeader {
  ...
  BackgroundItem {
    anchors.fill: parent
    onClicked: ...
  }
}

But the tappable area will be a bit small.

3 Likes
3

My 2 penneth;

Page {
    
    allowedOrientations: Orientation.All

    Column { width: parent.width
        PageHeader { title: "Settings" }
        
        SectionHeader {
            id: header
            text: headerText
            MouseArea {
                anchors.fill: parent
                onClicked: toggleHeaderText()
            }
        }
        SectionHeader {
            id: header2
            text: headerText2
            MouseArea {
                anchors.fill: parent
                onPressAndHold: toggleHeaderText2()
            }
        }
    }
    property string headerText: "Connectivity"

    // Click to change
    function toggleHeaderText() {
        headerText = (headerText === "Connectivity") ? "Something else" : "Connectivity";
    }
    property string headerText2: "Telephony"

    // Press and hold to change
    function toggleHeaderText2() {
        headerText2 = (headerText2 === "Telephony") ? "Something more" : "Telephony";
    }
1 Like
4

both options do work in the sense that they do trigger the event, thank you !
i am struggling with positioning the textfield that should appear below or above of the sectionheader

1 Like
5

Already being in a column, positioning of a TextField shouldn’t be a problem, put it in line with SectionHeader.
I’m not near my pc, but I’ll have a play later.

6

yes within the column it works nicely !
i would have 5-8 of those combinations on my page, i have tried to move that into separated component.
but as soon as i do that the rendering is broken and all SectionHeaders are shown above of the column

7

That happens when you have an ”illegal” anchor (top,bottom, fill) in an element below Column.
I find it works best if all children of Column have

anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
1 Like