💻
Programming Concept
  • 👨‍🔬About Me
  • 📗C++ STL Concept 2023
    • 📖STL in CPP ( Part I)
    • 📖STL in CPP ( Part II)
    • 📖STL in CPP ( Part III )
    • 📖STL in CPP ( Part IV )
    • 📖STL in CPP ( Part V )
    • 📖STL in CPP ( Part VI )
    • 📖STL in CPP ( Part VII )
  • ✏️Pointers in C / C++
    • 📖Pointers in details
  • 📘Strings in CPP 2023
  • 🕞Thread in C++ 2023
  • 📓Smart Pointer in C++ 2023
  • Basic C++ Topics
    • 💼Type Casting in C++ 2023
  • 💻Advanced C++ Programming
    • 🎓Topics (Syllabus)
    • 🧑‍🎓Inheritance and Polymorphism
    • 🖊️Exception Handling
    • 🏃Runtime Type Information
    • 📔An Overview of Templates
    • 📡Template in C++
  • 💻Embedded Linux
    • 🖥️Embedded Linux OS
      • Build Yocto Project Step By Step
      • How to install apt-get to the Yocto Project image
      • Installing gcc/g++ toolchain in yocto project
      • Installing GDB in yocto project
      • Installing ssh-server-dropbear for embedded linux in yocto project
      • Add Python To A Build
      • Add Boost To A Build
      • Adding Valgrind To Build
      • How To Add A Custom App To A Yocto Build
      • Raspberry Pi
    • 📶Communication Protocols
      • ✏️Working With I2C using c++
      • 📔SPI Implementation with source code in C++
      • 📓Linux Serial Ports Using C/C++
      • 🖱️UART
      • 🖨️Universal GPIO Access
  • 🧑‍💻QT QML
    • 📘QT QML Concept 2023
      • Why Qt Framework and QML
      • Sqlite3 for qtquick application
      • How To Install sqlite3 in windows 11 || Windows 10
      • Signals and Slots in Qt QML
      • Working with Signals and Slots in QML
      • Sorting QML ListModels
      • ListView In QML With Section Delegate
      • Registration of custom enum in QML
      • Registering a QML Type as a Singleton object
      • Using enumerations in QML without C ++
      • Registering a Singleton object to use “Static” methods in QML
      • Connecting JavaScript files to other JavaScript files in a Qt / QML project
      • Positioning in Qt QML with anchors
      • TextInput validators in Qt Qml
      • Qt Qml Abstract Item Model using C++
      • Qt QML List Model
      • How to Register your C++ Class as a QML Type
      • Jabra Speaker Connect Qt Project
      • Qt | One article summarizing QObject
  • ▶️QT Concept
    • ℹ️Icon button
    • 💻Register QML Singletone in CP
Powered by GitBook
On this page

Was this helpful?

  1. QT QML
  2. QT QML Concept 2023

ListView In QML With Section Delegate

PreviousSorting QML ListModelsNextRegistration of custom enum in QML

Last updated 1 year ago

Was this helpful?

QML Code :

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
Page {
    Rectangle {
        id: backgroundRect
        anchors.fill: parent
        color: "#89a"
    }

    Frame {
        id: frame
        anchors.centerIn: parent
        width: 1000
        height: 400
        padding: 0
        background: Rectangle {
            radius: 10
        }
        ListView {
            id: listView
            model: SampleListModel { }
            anchors.fill: parent
            clip: true
            delegate: Frame {
                width: ListView.view.width
                background: Rectangle {
                    color: index & 1 ? "#eee" : "#ccc"
                }
                Text {
                    width: parent.width
                    text: model.name
                    wrapMode: Text.WordWrap
                }
            }
            section.property: "group"
            section.delegate: Frame {
                width: ListView.view.width
                background: Rectangle {
                    color: "#60a2b3"
                }
                Text {
                    anchors.centerIn: parent
                    text: section
                }
            }
        }
    }

    Item {
        id: backgroundMask
        anchors.fill: parent
        visible: false
        Rectangle {
            x: frame.x
            y: frame.y
            width: frame.width
            height: frame.height
            radius: 10
         }
    }

    OpacityMask {
        anchors.fill: parent
        source: backgroundRect
        maskSource: backgroundMask
        invert: true
    }
}

// SampleListModel.qml
import QtQuick
import QtQuick.Controls

ListModel {
    id: listModel
    ListElement { name: "A"; group: "Group A" }
    ListElement { name: "B"; group: "Group A" }
    ListElement { name: "C"; group: "Group B" }
    ListElement { name: "D"; group: "Group B" }
    ListElement { name: "E"; group: "Group C" }
    ListElement { name: "F"; group: "Group C" }
    ListElement { name: "G"; group: "Group C" }
    ListElement { name: "H"; group: "Group C" }
    ListElement { name: "01010101001000111010100101010101110010111100011101101001010"; group: "Group D" }
    ListElement { name: "User2"; group: "Group D" }
    ListElement { name: "User3"; group: "Group D" }
    ListElement { name: "User4"; group: "Group D" }
    ListElement { name: "User5"; group: "Group D" }
    ListElement { name: "User6"; group: "Group D" }
    ListElement { name: "User7"; group: "Group D" }
    ListElement { name: "User8"; group: "Group D" }
    ListElement { name: "User9"; group: "Group D" }
    ListElement { name: "User10"; group: "Group D" }
    ListElement { name: "User11"; group: "Group D" }
    ListElement { name: "User12"; group: "Group D" }
    ListElement { name: "User13"; group: "Group D" }
    ListElement { name: "01010101001000111010100101010101110010111100011101101001010"; group: "Group D" }
    ListElement { name: "User2"; group: "Group D" }
    ListElement { name: "User3"; group: "Group D" }
    ListElement { name: "User4"; group: "Group D" }
    ListElement { name: "User5"; group: "Group D" }
    ListElement { name: "User6"; group: "Group D" }
    ListElement { name: "User7"; group: "Group D" }
    ListElement { name: "User8"; group: "Group D" }
    ListElement { name: "User9"; group: "Group D" }
    ListElement { name: "User10"; group: "Group D" }
    ListElement { name: "User11"; group: "Group D" }
    ListElement { name: "User12"; group: "Group D" }
}
🧑‍💻
📘