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
Donate

Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

DK
Jan. 16, 2020, 3:19 a.m.
Dmitrij Korjagin

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

  • Result:73points,
  • Rating points1
LZ
Jan. 16, 2020, 3:03 a.m.
Lilija Ziganurova

C++ - Test 005. Structures and Classes

  • Result:50points,
  • Rating points-4
p
Jan. 13, 2020, 4:59 p.m.
popkadurak

C++ - Test 002. Constants

  • Result:100points,
  • Rating points10
Last comments
Jan. 17, 2020, 2:31 a.m.
Andrej Jankovich

Выглядит как ошибка библиотеки. Расскажите подробно на какой платформе вы собираете проект (MinGW или MSVC) их версии и версии Qt.
D
Jan. 16, 2020, 12:06 p.m.
DENIZ1819

Доброго времени суток, не подскажите, что делать в данной ситуации, после того, как я сделал все вышеуказанные инструкции для подключения библиотеки к проекту?
Jan. 14, 2020, 5:33 a.m.
Evgenij Legotskoj

Рекомендую Wt, достаточно мощная вещь. Этот фреймворк может использоваться для написания сайтов на C++, либо можно использовать только отдельный компоненты, например только ORM. Но я не знаю, ка…
a
Jan. 14, 2020, 5:29 a.m.
ayb

Спасибо за инфу. Поиск качественной ORM привел меня только к sqlite_orm, но не подходит из-за необходимости полноценной поддержки c++14. Про framework Wt не слышал, спасибо за наводку.
Jan. 14, 2020, 2:50 a.m.
Evgenij Legotskoj

Вы заблуждаетесь. Любая нормальная ORM позволяет выполнение сырых SQL запросов. А если хорошо разобраться в работе моделей данных в Qt, то не составит труда использовать ORM вместе с Qt, ту же с…
Now discuss on the forum
VZ
Jan. 18, 2020, 7:25 a.m.
Vladimir Zhitkovsky

В приложении есть страницы с контролами. в с++ я заполняю структуры ассоциированные с контролами в qml. затем генерю сигнал о том, что все данные готовы и в qml по этому сигналу заполняю контрол…
Jan. 18, 2020, 7:12 a.m.
Ruslan Polupan

Строку host разкоментировать и указать адрес сервера [listener];host=192.168.0.100port=8080minThreads=4maxThreads=100cleanupInterval=60000readTimeout=60000maxRequestSize=16000maxMulti…
Jan. 17, 2020, 2:20 a.m.
Intruder

Александр, доброго дня! Я тоже только учусь и поэтому мой код может быть не совершенен. За отклик большое спасибо.
L
Jan. 16, 2020, 8:14 p.m.
LesLype

Oct Products Similiar To Lasix Kamagra Now.Co.Uk Sky Pharmacy Canada [url=http://cialibuy.com]Buy Cialis[/url] Viagra Ricetta Ripetibile
Jan. 16, 2020, 6:05 p.m.
Aleksej Vnukov

в лоадер вроде как нельзя передать значение при загрузке, я не нашел такой возможности, через стек без проблем. если использую лоадер - я передаю в С++ нужные параметры, а потом при загрузке стр…
EVILEG
About
Services
© EVILEG 2015-2019
Recommend hosting TIMEWEB