We have moved to a new Sailfish OS Forum. Please start new discussions there.
3

Looking for some clues about qtquick/silica

asked 2015-11-17 22:38:31 +0300

peerchemist gravatar image

Hi,

I am developing an application for Sailfish OS. I made some good progress with QT until I have bumped into what seems insolvable. Documentation is very sparse for QT newbies so I ask for help here.

How to make qtquick listview (or SilicaListView) elements clickable? I have learned to make dynamic sized list out of some data and show it properly, but how to make each listView element to react to user input and activate something?

code:

Page {

   SilicaListView {
     var list = ["apple", "orange", "plum", "boomerang"];

     ?????

    }
}
edit retag flag offensive close delete

Comments

One way to find good examples is going to openrepos where most of the sailfish applications are open-source with source code on github

Jonas ( 2015-11-17 22:49:25 +0300 )edit

2 Answers

Sort by » oldest newest most voted
3

answered 2015-11-17 22:55:38 +0300

rgrnetalk gravatar image

A bit more specific: look at the code at: https://github.com/llelectronics/noto/blob/master/qml/pages/FirstPage.qml. The listview has a delegate with onPressAndHold (#152) that gives background menu - delete and onClicked (#157) that opens the note or todo in a new page. Noto is a nice project to start with, it helped me a lot!

edit flag offensive delete publish link more
2

answered 2015-11-17 23:03:44 +0300

Never gravatar image

updated 2015-11-17 23:04:24 +0300

1) Create a ListModel

ListModel {
    id: yourModel
    ListElement {
        page: "apple"
        title: "Awesome apples here"
    }
    ListElement {
        page: "banana"
        title: "Lazy banana here"
    }
}

2) Assign ListModel to SilicaListview and use delegate to create the clickable elements

SilicaListView {
    model: yourModel

    delegate: BackgroundItem {
        onClicked: doSomething()
        width: root.width
        Label {
                text: model.title
                font.pixelSize: Theme.fontSizeLarge
                height: Theme.itemSizeLarge
                width: parent.width
                color: highlighted ? Theme.highlightColor : Theme.primaryColor
                horizontalAlignment: Text.AlignHCenter
            }
    }
}
edit flag offensive delete publish link more
Login/Signup to Answer

Question tools

Follow
3 followers

Stats

Asked: 2015-11-17 22:38:31 +0300

Seen: 458 times

Last updated: Nov 17 '15