Awesome Flat QML UI

 

ListView In QML With Section Delegate 

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" }
}