20 ноября 2019 г. 1:28

Перекрытие внешнего вида между 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 в первый, второй перекрывает скругления первого. Есть какие-либо варианты решения этой проблемы? Спасибо!

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
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 и пишем код для обработки перемещения и ресайза окна

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Donate

Здравствуйте, уважаемые пользователи EVILEG !!!

Если сайт вам помог, то поддержите разработку сайта финансово, пожалуйста.

Вы можете сделать это следующими способами:

Спасибо, Евгений Легоцкой

ГС
23 января 2020 г. 15:04
Галина Степанівна Шепелюк

C++ - Тест 004. Указатели, Массивы и Циклы

  • Результат:10баллов,
  • Очки рейтинга-10
ГС
23 января 2020 г. 14:51
Галина Степанівна Шепелюк

C++ - Тест 003. Условия и циклы

  • Результат:71баллов,
  • Очки рейтинга1
M
23 января 2020 г. 3:28
Mitrider

C++ - Тест 003. Условия и циклы

  • Результат:71баллов,
  • Очки рейтинга1
Последние комментарии
21 января 2020 г. 13:12
Docent

Полезная статья. Как всегда - то что надо. Добавлю ещё маленькую полезность - после установки tracer (88 строка) и перед выводом значений в lineEdit (91 строка) стоит добавить updatePositio…
17 января 2020 г. 1:31
Андрей Янкович

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

Доброго времени суток, не подскажите, что делать в данной ситуации, после того, как я сделал все вышеуказанные инструкции для подключения библиотеки к проекту?
14 января 2020 г. 4:33
Евгений Легоцкой

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

Спасибо за инфу. Поиск качественной ORM привел меня только к sqlite_orm, но не подходит из-за необходимости полноценной поддержки c++14. Про framework Wt не слышал, спасибо за наводку.
Сейчас обсуждают на форуме
24 января 2020 г. 1:37
Евгений Легоцкой

Не уверен. я бы попробовал выдернуть ссылки и забрать всё через QNetworkAccessManager, если вам не нужно запускать эти скрипты. Я с той ошибкой не сталкивался.
VZ
23 января 2020 г. 12:29
Vladimir Zhitkovsky

Доброго дня! Вопрос как правильно удалять данные из модели сделанной таким образом: https://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html пример с QObjectList-based Model. В плю…
23 января 2020 г. 11:54
Intruder

Евгений, с удалением строк разобрался. Спасибо за помощь. Немного пришлось модернизировать код, но все получилось вроде.
22 января 2020 г. 5:06
Pavel.K

Можете попробовать через Loader сделать, те cделать свой компонент ректангл с нужными вам полями и через Loader вызывать этот компонент , а через Connections прописать что ваш компонент отрисова…
22 января 2020 г. 3:25
Pavel.K

Привет, кто-нибудь делал тестовый Json сервер , чтобы не просто через сокет ByteArray пересылать, а с клиента обрабатывать Post и get запросы? Буду очень признателен если у кого то есть пр…
EVILEG
О нас
Услуги
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB