20 ноября 2019 г. 2: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 !!!

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

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

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

СБ
5 декабря 2019 г. 8:01
Сергей Бедерин

C++ - Тест 001. Первая программа и типы данных

  • Результат:60баллов,
  • Очки рейтинга-1
АС
4 декабря 2019 г. 6:39
Артур Салмин

C++ - Тест 005. Структуры и Классы

  • Результат:33баллов,
  • Очки рейтинга-10
СТ
2 декабря 2019 г. 16:05
Сергей Тимченко

Qt - Тест 001. Сигналы и слоты

  • Результат:68баллов,
  • Очки рейтинга-1
Последние комментарии
6 декабря 2019 г. 12:47
Евгений Легоцкой

я подумал насчёт debug/release, но мне показалось - это сильно очевидным )))) Насчёт cmake согласен - он лучше
r
6 декабря 2019 г. 12:46
romankoshelev

С cmake разобрался. Всетаки писать на нем сильно проще. С размером dll тоже разобрался. windeployqt надо давать флаг --release (тогда библиотеки в 20 раз меньше)
6 декабря 2019 г. 12:40
Евгений Легоцкой

Конечно, хорошо бы это дело и на cmake сделать, но если честно, в задачах у меня такого нет, а делать специально только это сейчас времени тоже не хватает. увы. А что касается гигабайта Qt…
r
6 декабря 2019 г. 11:37
romankoshelev

А что сделать чтоб qt не тащило весь свой гигабайт в инсталлер?
Сейчас обсуждают на форуме
6 декабря 2019 г. 7:10
qml_puthon_user

Доброго времени суток. Пытаюсь сделать отображение с веб-камеры в графическом интерфейсе написанном на qml. Код программы: #системные библиотекиimport cv2import numpy as npimport…
5 декабря 2019 г. 16:12
Евгений Легоцкой

Это уже кастомная стилизация. Придётся отключать обрамление и самостоятельно реализовывать ресайз окна, его перемещение, стиль и т.д. Вот статья, как отключить обрамление окна - QML …
5 декабря 2019 г. 4:27
qml_puthon_user

Вот код, вдруг, кому поможет. Код основной формы: import QtQuick 2.12import QtQuick.Controls 2.12import QtQuick.Layouts 1.3import "./Components/Panels" as PanelsApplicationWindow{…
5 декабря 2019 г. 2:50
Евгений Легоцкой

Создавайте новые темы, чтобы не было всё в куче.
4 декабря 2019 г. 22:07
qml_puthon_user

Спасибо за помощь! :) Я попытаю надежды в ожидании QtQuick3D от Riverbank'a. :)
EVILEG
О нас
Услуги
© EVILEG 2015-2019
Рекомендует хостинг TIMEWEB