Skip to content
  • ListView with Flow layout

    Unsolved QML and Qt Quick qml listview layout
    3
    0 Votes
    3 Posts
    88 Views
    A
    @SuhasKrishanamurthy, thanks for your help, but the GridView component has fixed cell's width and height. Items' height can grow up, but if it will be greater than cell's size, the collision occures. If I adjusted GridView's cell size depending on size of largest item, there were too much free space between small items. The following code lays items out with collision: GridView { id: gridView width: 600 height: 400 cellWidth: 200 cellHeight: 100 flow: GridView.FlowTopToBottom model: ListModel { ListElement { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit" } ListElement { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } ListElement { value: "Lorem ipsum dolor sit amet" } } // orientation: Qt.Horizontal // GridView doesn't have this property boundsBehavior: Flickable.StopAtBounds clip: true delegate: Item { width: gridView.cellWidth height: contentItem.implicitHeight required property string value Rectangle { id: contentItem width: parent.width color: "lightgray" implicitHeight: tex.implicitHeight + 20 Text { id: tex text: value wrapMode: Text.WordWrap anchors.margins: 10 anchors.fill: parent } } } } [image: 5511da81-8d79-4306-a3e0-805fb1a8683a.png] The desired behavior is lay items out onto the first column until it has free space and then turn into the next column (see picture in the question). Unfortunately, GridView lays item out strictly as a grid. This is partially implemented with Flow + Repeater layout: [image: 0887646e-c6a2-4106-b30c-ff9f8b07a38f.png]
  • 0 Votes
    3 Posts
    1k Views
    SavizS
    I did some more research and it seems this is the way to do it: // This code must be placed directly in the ListView WheelHandler { acceptedDevices: PointerDevice.Mouse property int speed: 2 property Flickable flickable: parent.parent onWheel: (event) => { let scroll_flick = event.angleDelta.y * speed; if(flickable.verticalOvershoot != 0.0 || (scroll_flick>0 && (flickable.verticalVelocity<=0)) || (scroll_flick<0 && (flickable.verticalVelocity>=0))) { flickable.flick(0, (scroll_flick - flickable.verticalVelocity)); return; } else { flickable.cancelFlick(); return; } } } Hope this helps someone.
  • 1 Votes
    3 Posts
    640 Views
    F
    @jsulm thanks! I just added target_include_directories(<appName> PUBLIC src) what works well.
  • Are ListView sections stylable?

    Unsolved QML and Qt Quick listview section style material
    2
    0 Votes
    2 Posts
    520 Views
    L
    @MrMeszaros you can style it anyway you want to. just add wrapper and style it to your liking: section.delegate: Rectangle{ width: parent.width height: childrenRect.height color: "red" required property string section Text { anchors.horizontalCenter: parent.horizontalCenter text: parent.section font.bold: true color: "blue" font.pointSize: 13 } }
  • 0 Votes
    12 Posts
    2k Views
    jeremy_kJ
    Defining a handler for a property change signal, and then setting a break point in that handler is my usual technique for finding unwanted changes.
  • 0 Votes
    1 Posts
    416 Views
    No one has replied
  • 0 Votes
    1 Posts
    384 Views
    No one has replied
  • ListView model from Q_PROPERTY problems

    Solved QML and Qt Quick qml listview qproperty qobject
    2
    0 Votes
    2 Posts
    793 Views
    KroMignonK
    @Kyeiv said in ListView model from Q_PROPERTY problems: What am i doing wrong that the view is empty? The problem is that QList<QString>() is not a valid type for a QML model! QML model can be QList<QObject*>() or QStringList() (cf https://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html). Change your Q_PROPERTY from QList<QString> to QStringList and it will work as expected.
  • 0 Votes
    1 Posts
    393 Views
    No one has replied
  • Access item inside ListView via delegate

    Solved QML and Qt Quick qml listview delegate button
    14
    0 Votes
    14 Posts
    4k Views
    RatzzR
    @GrecKo , I mean without the button, when I edit the values of TextEdit, I should be able to get the modified text. I tried via property. It always gave me empty
  • 0 Votes
    1 Posts
    940 Views
    No one has replied
  • 0 Votes
    3 Posts
    852 Views
    jeanmilostJ
    @LeLev Thank you very much for your answer. It helped me to understand my issue a little more. So I tried your code, and it works, meaning that the ListView isn't eating the Space key. However my interface is a little more complex than this one, it contains other objects like SwipeView, and yes, my items contain components like buttons which may take the focus. However I already tried to deactivate them and even thus the issue remained. I played a while around the code you posted. I noticed that the following code no longer receives any key: Rectangle { anchors.fill: parent color: "transparent" visible: true SwipeView { anchors.fill: parent activeFocusOnTab: false Page { background: null ListView { id: view anchors.fill: parent spacing: 2 focus: true model: ListModel { ListElement { name: "el1" } ListElement { name: "el2" } ListElement { name: "el3" } } delegate: Button { focus: false focusPolicy: Qt.NoFocus onFocusChanged: {if (focus) focus = false;} width: parent.width height: 50 text: index === view.currentIndex ? "currentIndex" : modelData onClicked: { view.currentIndex = index } } Keys.onPressed: { console.warn("key clicked"); if (event.key === Qt.Key_Space) { console.log("space clicked"); console.log(view.model.get(view.currentIndex).name); // view.model.get(ind).name = "new value" event.accepted = true; } } } } } } So I assume that some components operate like filters and may stop internally the keyboard signals, or at least a part of them, without let the choice to the developer to bypass this behavior (or at least I don't know how to do). To be honest I'm a little puzzled, because I worked for15 years with the Windows API before changing for Qt, and receiving a keyboard notification was never an issue, even when the parent component already received it before (in fact it was the contrary: the message could be blocked in the parent, but by default it was passing). So now the question is: in the above code, how can I receive the keyboard signals, and in particular the Space key, in my ListView despite of the parent SwipeView? Or which solution is normally used in a such situation, e.g is there a way to globally listen the keyboard and intercept keys in the Windows level, BEFORE any component receives them?
  • 0 Votes
    1 Posts
    513 Views
    No one has replied
  • 0 Votes
    2 Posts
    1k Views
    M
    Just an update, not sure if this is the reason for the behavior described above, but I had two ListView properties set to values, which could be contributing to this: preferredHighlightBegin: Math.floor(width/2) preferredHighlightEnd: Math.floor(width/2 + 1) I noticed that to trigger the issue I had to resize the window, so it makes sense to me that once I resized the window the preferredHighlight area would be not in the center, while positionViewAtIndex would position the item exactly at the center, which would then cause currentIndex to be updated to the next item.
  • Sorting words from SQLite into alphabetical sections

    Unsolved QML and Qt Quick sqlite listview
    1
    0 Votes
    1 Posts
    378 Views
    No one has replied
  • 0 Votes
    3 Posts
    2k Views
    GrecKoG
    @jeanmilost said in ListView - How to refresh rows which content changed without slowdown?: view.model.dataChanged(view.model.index(0, columnCount - 1), view.model.index(rowCount - 1, columnCount - 1)); So you are emiting dataChanged from QML? That seems like a bad practice, why can't you do that in the model?
  • integrating with QAbstractListModel

    Unsolved QML and Qt Quick signal & slot listview
    1
    0 Votes
    1 Posts
    347 Views
    No one has replied
  • Listview viewing order

    Unsolved QML and Qt Quick listview vieworder
    7
    0 Votes
    7 Posts
    1k Views
    W
    Thi is quite late but did you find a solution? I've the same problem and could not find a way till now...