Nov. 20, 2019, 2:28 a.m.

Перекрытие внешнего вида между Rectangle qml

qml

Здравствуйте, я недавно начал изучать QML и появился вопрос по поводу создания своего элемента. Мне требуется вставить один Rectangle в другой, это я иделаю.

Rectangle {
        x: 27
        y: 31
        width: 100
        height: 100
        color: "blue"
        radius: 30

        Rectangle {
            x: 0
            y: 0
            width: 100
            height: 100

            color: "green"

        }
    }

После того, как вставляю второй Rectangle в первый, второй перекрывает скругления первого. Есть какие-либо варианты решения этой проблемы? Спасибо!

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.
10

правильно, как вы написали так он и делает. дело в том что вы по тем же размерам и в том же месте ставляете новый прямоугольник поэтому происходит перекрытие, вот если сделаете на оборот, скругление углов у второго - то из-под второго будут торчать уголочки первого

Добрый день

Если вы хотите, чтобы уголки внутреннего Rectangle срезались закругление внешнего, то используйте свойство clip

Rectangle {
    x: 27
    y: 31
    width: 100
    height: 100
    color: "blue"
    radius: 30

    clip: true // Для срезания всех объектов, которые выходят за пределы этого Rectangle

    Rectangle {
        x: 0
        y: 0
        width: 100
        height: 100

        color: "green"

    }
}

Clip не срабатывает. Я пробую сделать в QtDesignStudio и просто через qml файл и python скрипт с вызовом qml файла(скрипт рабочий)

import QtQuick 2.12
import QtQuick.Controls 2.3

ApplicationWindow
{
    id:general_win
    visible: true
    width: 800
    height: 600
    title: qsTr("title")



        Rectangle 
        {
            x: 27
            y: 31
            width: 100
            height: 100
            color: "blue"
            radius: 30

            clip: true // Для срезания всех объектов, которые выходят за пределы этого Rectangle

            Rectangle 
            {
                x: 0
                y: 0
                width: 80
                height: 80

                color: "green"

            }
        }

}

Я увидел, как обрезается в QtDesignStudio. Да, Clip срабатывает, и когда выносится внутренний Rectangle за границу внешнего, внутренний обрезается. Но, получается, что Clip не распространяется на radius? Можно сделать так, чтобы при скруглении границ внешнего Rectangle, так же обрезались и у внутреннего?

import QtQuick 2.12
import QtQuick.Controls 2.3

ApplicationWindow
{
    id:general_win
    visible: true
    width: 800
    height: 600
    title: qsTr("title")

    Rectangle 
    {
        x: 27
        y: 31
        width: 100
        height: 100
        color: "blue"
        radius: 30

        clip: true // Для срезания всех объектов, которые выходят за пределы этого Rectangle

        Column
        {
            width: parent.width
            height: parent.height
            Rectangle 
            {
                x: 0
                y: 0
                width: parent.width
                height: parent.height / 2

                color: "green"

            }

            Rectangle 
            {
                x: 0
                y: 0
                width: parent.width
                height: parent.height / 2

                color: "pink"

            }
        }
    }
}

Для более понятного понимания того, что я хочу сделать.
Я сделал внешний Rectangle и вставил в него ещё 2 Rectangle разными цветами. Теперь мне требуется, чтобы они повторили скругления от внешнего Rectangle.

Мда, немного почитав другие форумы, я нашёл информацию о том, что clip действтиельно работает подобным образом. Это было сделано из-за соображений производительности. Это написано в багтрекере Qt.

Но то, что вы хотите, можно сделать с помощью QtGraphicalEffects

Вот код

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
         radius: 30
         color: "blue"
         clip: true

         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: 0
             y: 0
             width: 80
             height: 80

             color: "green"
         }
     }
}

Вот результат

Подскажите, пожалуйста. В своём проекте Вы используете Window, как главное окно. Я пробовал написать ApplicationWindow и закомментировать "import QtQuick.Window 2.12". При запуске ничего не показывает. Никак не смог найти различия между Window и ApplicationWindow. Есть ли какие-то различия в их использовании?

импорты не все добавили скорее всего. так напишите

import QtQuick 2.12
import QtQuick.Controls 2.3
import QtGraphicalEffects 1.13

ApplicationWindow  {

ApplicationWindow это тип наследованный от Window. Отличается тем, что имеет свойства для MenuBar, ToolBar, и StatusBar с платформозависимым поведением.

Да, действительно, не досмотрел. Четвёртые сутки сижу с освоением qml. :) Спасибо! :)

Я есть возможность скругления углов у всего окна приложения? Подобно, как в MacOS сделано.

Это уже кастомная стилизация. Придётся отключать обрамление и самостоятельно реализовывать ресайз окна, его перемещение, стиль и т.д.

Вот статья, как отключить обрамление окна - QML - Урок 031. Отключаем системное обрамление окна в QML и пишем код для обработки перемещения и ресайза окна

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
June 6, 2020, 12:20 a.m.
Aleksej

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

  • Result:60points,
  • Rating points-1
June 6, 2020, 12:15 a.m.
Aleksej

C++ - Test 001. The first program and data types

  • Result:53points,
  • Rating points-4
V
June 5, 2020, 5:47 p.m.
Vladzo

C++ - Test 005. Structures and Classes

  • Result:83points,
  • Rating points4
Last comments
June 5, 2020, 11:52 a.m.
progammist

Распознавание изображений на Python с помощью TensorFlow и Keras

Огромное спасибо за метериал, по-больше бы подобных статей (с подробным описанием работы и примерами применения) на тему современных технологий. Вопрос поразмышлять. На текущий момент реал…
June 5, 2020, 2:39 a.m.
Evgenij Legotskoj

Qt/C++ - Tutorial 091. How to write a custom delegate controlling the highlighting of a row in a table

По-моему, смысла в этом нет особого. Если делегат будет игнорировать настройки таблицы, то это приведёт ещё к большему непониманию, что вообще происходит, для программиста, который после вас буд…
June 5, 2020, 2:34 a.m.
IscanderChe

Qt/C++ - Tutorial 091. How to write a custom delegate controlling the highlighting of a row in a table

Сижу, размышляю: можно ли переписать делегата так, чтобы независимо от настроек строк выделялись строки?
June 5, 2020, 2:31 a.m.
Evgenij Legotskoj

Qt/C++ - Tutorial 091. How to write a custom delegate controlling the highlighting of a row in a table

Понятно. Я не обратил внимания на то, что там было в старом коде по настройкам строк :)
Now discuss on the forum
s
June 6, 2020, 2:54 a.m.
shuric

Qt/C++ Определение положения курсора над действие(кнопкой) в QToolBar

Доброго дня. Возник вопрос - как можно определить что курсор находится над определенным действием(кнопкой) в qtoolbar ? mainwindow.cpp MainWindow::MainWi…
s
June 6, 2020, 1:45 a.m.
shuric

Qt/C++ особенности QProxyStyle

Да, Вы правы. Код был скопирован с сайта (уже не помню с какого), но решил пойти по пути более легком. Пришлось переписать - кому интересно: использовал stackedWidget для пе…
June 6, 2020, 12:08 a.m.
Aleksej

Посоветуйте новичку (базы данных и Qt, что учить)

Блин, а я недавно купил Шлее Qt 5.10 :( С детства хотел стать программистом, баловался Паскалем, писал простенькие программки на Delphi, создавал движок на php, изучал C (забросил и перешел на п…
June 5, 2020, 2:09 p.m.
IscanderChe

QPlainTextEdit настройка цвета фона

Вечер добрый. Пытаюсь настроить цвет фона QPlainTextEdit следующим образом: CodeEditor::CodeEditor(QWidget *parent) : QPlainTextEdit(parent){ ... QPalette::ColorRole role = bac…
June 5, 2020, 7:13 a.m.
IscanderChe

Фильтр для QtableView sql

Добрый день. Для такой фильтрации необходимо использовать QSortFilterProxyModel. В оффдоках есть хороший пример.
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB