qml_puthon_user
qml_puthon_user20 ноября 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
Алексей Внуков
  • 20 ноября 2019 г. 2:44

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

    Evgenii Legotckoi
    • 20 ноября 2019 г. 2:48

    Добрый день

    Если вы хотите, чтобы уголки внутреннего 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"
    
        }
    }
    
      qml_puthon_user
      • 20 ноября 2019 г. 3:09
      • (ред.)

      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"
      
                  }
              }
      
      }
      

        qml_puthon_user
        • 20 ноября 2019 г. 3:44

        Я увидел, как обрезается в 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.

          Evgenii Legotckoi
          • 20 ноября 2019 г. 3:54
          • Ответ был помечен как решение.

          Мда, немного почитав другие форумы, я нашёл информацию о том, что 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"
                   }
               }
          }
          
          

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

            qml_puthon_user
            • 20 ноября 2019 г. 4:54

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

              Evgenii Legotckoi
              • 20 ноября 2019 г. 4:57

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

              import QtQuick 2.12
              import QtQuick.Controls 2.3
              import QtGraphicalEffects 1.13
              
              ApplicationWindow  {
              
              

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

                qml_puthon_user
                • 20 ноября 2019 г. 5:04

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

                  qml_puthon_user
                  • 5 декабря 2019 г. 12:07

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

                    Evgenii Legotckoi
                    • 5 декабря 2019 г. 16:12

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

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

                      Комментарии

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

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

                      • Результат:50баллов,
                      • Очки рейтинга-4
                      m
                      • molni99
                      • 26 октября 2024 г. 1:37

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

                      • Результат:80баллов,
                      • Очки рейтинга4
                      m
                      • molni99
                      • 26 октября 2024 г. 1:29

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

                      • Результат:20баллов,
                      • Очки рейтинга-10
                      Последние комментарии
                      ИМ
                      Игорь Максимов22 ноября 2024 г. 11:51
                      Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                      Evgenii Legotckoi
                      Evgenii Legotckoi31 октября 2024 г. 14:37
                      Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                      A
                      ALO1ZE19 октября 2024 г. 8:19
                      Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                      ИМ
                      Игорь Максимов5 октября 2024 г. 7:51
                      Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                      d
                      dblas55 июля 2024 г. 11:02
                      QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                      Сейчас обсуждают на форуме
                      m
                      moogo22 ноября 2024 г. 7:17
                      Mosquito Spray System Effective Mosquito Systems for Backyard | Eco-Friendly Misting Control Device & Repellent Spray - Moogo ; Upgrade your backyard with our mosquito-repellent device! Our misters conce…
                      Evgenii Legotckoi
                      Evgenii Legotckoi24 июня 2024 г. 15:11
                      добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                      t
                      tonypeachey115 ноября 2024 г. 6:04
                      google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                      NSProject
                      NSProject4 июня 2022 г. 3:49
                      Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…

                      Следите за нами в социальных сетях