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 г. 11:37

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

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

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

                      • Результат:20баллов,
                      • Очки рейтинга-10
                      Последние комментарии
                      i
                      innorwall12 ноября 2024 г. 9:12
                      Django - Урок 055. Как написать функционал auto populate field Freckles because of several brand names retin a, atralin buy generic priligy
                      i
                      innorwall12 ноября 2024 г. 5:23
                      QML - Урок 035. Использование перечислений в QML без C++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
                      i
                      innorwall12 ноября 2024 г. 2:50
                      Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
                      i
                      innorwall12 ноября 2024 г. 1:19
                      Алгоритм сортировки кучей The role of raloxifene in preventing breast cancer priligy precio
                      i
                      innorwall12 ноября 2024 г. 0:55
                      PyQt5 - Урок 006. Работа с QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
                      Сейчас обсуждают на форуме
                      i
                      innorwall12 ноября 2024 г. 7:56
                      добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
                      i
                      innorwall11 ноября 2024 г. 21:55
                      Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
                      9
                      9Anonim25 октября 2024 г. 19:10
                      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
                      ИМ
                      Игорь Максимов3 октября 2024 г. 14:05
                      Реализация навигации по разделам Спасибо Евгений!

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