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

qml

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

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

            color: "green"

        }
    }

Рекомендуємо хостинг TIMEWEB

Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

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

Добрый день

Если вы хотите, чтобы уголки внутреннего 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 и пишем код для обработки перемещения и ресайза окна