QML - Tutorial 038. Using the clip property to crop child objects inside Item or Rectangle

clip, OpacityMask, ListView, QML

Content

Quite often, the same question arises on the forum regarding the problem of displaying content embedded in any QML objects.

The most common manifestation of this problem is when ListView content scrolls beyond its scope. In any case, this is one of those frequent cases when beginners encounter this problem when starting to learn QML. Well, or another option when faced with such a problem when using Rectangle objects.

In the following image below, you can see two application windows that illustrate this problem.

  • The left window shows what the layout looks like initially
  • The right window shows that if you start scrolling through ListView content, it will go under the Title text, although it should have been cropped.

Initial code example

This is what the original program code looks like.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: topText
        text: qsTr("Title")

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
    }

    ListView {
        width: 180; height: 200

        model: contactModel
        delegate: Text {
            text: name + ": " + number
        }

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: topText.bottom
    }

    ListModel {
        id: contactModel
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }
}

To solve this problem, just set the clip: true property of ListView .

ListView {
    clip: true

    /* код */
}

And now ListView content will not go beyond ListView

Using Rectangle Objects

Similarly, clip works for Rectangle objects. Here is the program code, as well as an example before and after including clip.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        x: 27
        y: 31
        width: 100
        height: 100
        color: "blue"
        clip: true

        Rectangle {
            x: -20
            y: -20
            width: 100
            height: 100

            color: "green"
        }
    }
}

Rounding

But what does not work when using clip is rounding, even if you adjust the radius of rounding at the parent Rectangle object.

For example, here we have such a code will not give the expected result

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        x: 27
        y: 31
        width: 100
        height: 100
        color: "blue"
        radius: 30 // set rounding
        clip: true // enable cropping

        Rectangle {
            x: -20
            y: -20
            width: 100
            height: 100

            color: "green"
        }
    }
}

The result

This clip behavior is standard and has been done for performance reasons, since almost all QML graphic elements are inherited from the Item type. This means that additional processing of masks throughout the application is redundant.

But the expected result can be achieved with the following program code using the graft effect OpacityMask

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.13

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        x: 27
        y: 31
        width: 100
        height: 100
        color: "blue"

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Item {
                width: rect.width
                height: rect.height
                Rectangle {
                    anchors.centerIn: parent
                    width: rect.adapt ? rect.width : Math.min(rect.width, rect.height)
                    height: rect.adapt ? rect.height : width
                    radius: 30
                }
            }
        }

        Rectangle {
            x: -20
            y: -20
            width: 100
            height: 100

            color: "green"
        }
    }
}

And the result will be as follows

Conclusion

In conclusion, I’ll say that clip is a very useful property, which for performance reasons was set to false by default. At the same time, this property performs only simple cropping in the form of a rectangle, and something more complex needs to be cropped using a mask.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
- company blog
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
How to become an author?

Contribute to the evolution of the EVILEG community.

Learn how to become a site author.

Learn it
Donate

Good day, Dear Users!!!

I am Evgenii Legotckoi, developer of EVILEG. And it is my hobby project, which helps to learn programming another programmers and developers

If the site helped you, and you want also support the development of the site, than you can donate by following ways

PayPalYandex.Money
Timeweb

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting Timeweb
g
May 29, 2020, 2:32 p.m.
glushchenkoin

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:40points,
  • Rating points-8
AS
May 26, 2020, 11:29 a.m.
Artem Sun-Dun-Chan

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4
MN
May 25, 2020, 11:33 a.m.
Mitja Nagibin

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:50points,
  • Rating points-4
Last comments
May 29, 2020, 1 p.m.
Evgenij Legotskoj

Django - Tutorial 023. Like Dislike system using GenericForeignKey

Думал так, но похоже что нет. {{ post.votes.likes.user.username }} Это же QuerySet будет, а не отдельный единственный объект {% for vote in post.votes %} {{ vote.user.username …
May 29, 2020, 11:43 a.m.
Vladislav Melenchuk

Django - Tutorial 023. Like Dislike system using GenericForeignKey

А как получить имя пользователя, который поставил лайк? Думал так, но похоже что нет. {{ post.votes.likes.user.username }}
May 29, 2020, 6:30 a.m.
Evgenij Legotskoj

Qt/C++ - Lesson 039. How to paint stroke in QSqlTableModel by value in the column?

У меня работает. Исправлял в проекте, который приложен к статье. А что происходит в вашем коде, с учётом места вызова этого кода, я знать не могу ;) Дебажьте и добавляйте условия, кото…
MA
May 29, 2020, 6:27 a.m.
Mihail A

Qt/C++ - Lesson 039. How to paint stroke in QSqlTableModel by value in the column?

QModelIndexList rowIndexes = ui->tableView->selectionModel()->selectedRows(); model->removeRows(rowIndexes.first().row(), rowIndexes.size()); model-&…
May 29, 2020, 6:14 a.m.
Evgenij Legotskoj

Django - Tutorial 036. How to add authentication through social networks. VKontakte

Неправильно прописали URL, на который возвращается ответ от OAuth ВКонтакте. Настраивайте ваше приложение в консоли разработчика ВКонтакте
Now discuss on the forum
DK
May 29, 2020, 1:27 p.m.
Dzhon Kofi

QMap<> какой ключ лучше

это ясно. Вопрос в том, как быстро мапа будет отрабатывать, если ключом будет QModelIndex. Какой параметр индекса возьмет за ключ. И вот насколько это будет медленнее или быстрее, чем QString пр…
DK
May 29, 2020, 11:10 a.m.
Dzhon Kofi

QModelIndex становится не действительным, но валидный

Привет. Есть проблема с индексом и для меня это чистая магия: Сначала, что делаю: на вьюхе есть редактируемые ячейки. Пользователь редактирует одну, потом внезапно решает не сохраниться и ш…
May 29, 2020, 7:52 a.m.
Vladimir Sergeevich

Масштабирование двумя пальцами на мобильных платформах

Я планировал описать этот момент на блоге, но никак руки не доходят (уже год). Летом дойдут. Тем не менее, у меня в репозитории лежит рабочий код игрушки "пазлы", где есть все это. …
May 29, 2020, 6:51 a.m.
Evgenij Legotskoj

Графическое ускорение

Зависит от платформы и поддерживаемых технологий. В QML в первую очередь используется OpenGL и отрисовка производится средствами GPU. Но может переключаться на использование CPU и прог…
IP
May 29, 2020, 1:55 a.m.
Igor' Poroshin

QTablwView + QSqlQueryModel скрыть пустой столбец

Да, понятно. В данном случае лучше использовать серверную процедуру (если такие поддерживаются), в которой будет проверяться наличие всех пустых строк у нужного столбца и вызываться соответ…
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB