qml_puthon_user
Nov. 20, 2019, 1:28 p.m.

Перекрытие внешнего вида между Rectangle qml

qml

Здравствуйте, я недавно начал изучать QML и появился вопрос по поводу создания своего элемента. Мне требуется вставить один Rectangle в другой, это я иделаю.

  1. Rectangle {
  2. x: 27
  3. y: 31
  4. width: 100
  5. height: 100
  6. color: "blue"
  7. radius: 30
  8.  
  9. Rectangle {
  10. x: 0
  11. y: 0
  12. width: 100
  13. height: 100
  14.  
  15. color: "green"
  16.  
  17. }
  18. }

После того, как вставляю второй Rectangle в первый, второй перекрывает скругления первого. Есть какие-либо варианты решения этой проблемы? Спасибо!

3

Do you like it? Share on social networks!

10
Алексей Внуков
  • Nov. 20, 2019, 1:44 p.m.

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

    Evgenii Legotckoi
    • Nov. 20, 2019, 1:48 p.m.

    Добрый день

    Если вы хотите, чтобы уголки внутреннего Rectangle срезались закругление внешнего, то используйте свойство clip

    1. Rectangle {
    2. x: 27
    3. y: 31
    4. width: 100
    5. height: 100
    6. color: "blue"
    7. radius: 30
    8.  
    9. clip: true // Для срезания всех объектов, которые выходят за пределы этого Rectangle
    10.  
    11. Rectangle {
    12. x: 0
    13. y: 0
    14. width: 100
    15. height: 100
    16.  
    17. color: "green"
    18.  
    19. }
    20. }
      qml_puthon_user
      • Nov. 20, 2019, 2:09 p.m.
      • (edited)

      Clip не срабатывает. Я пробую сделать в QtDesignStudio и просто через qml файл и python скрипт с вызовом qml файла(скрипт рабочий)

      1. import QtQuick 2.12
      2. import QtQuick.Controls 2.3
      3.  
      4. ApplicationWindow
      5. {
      6. id:general_win
      7. visible: true
      8. width: 800
      9. height: 600
      10. title: qsTr("title")
      11.  
      12.  
      13.  
      14. Rectangle
      15. {
      16. x: 27
      17. y: 31
      18. width: 100
      19. height: 100
      20. color: "blue"
      21. radius: 30
      22.  
      23. clip: true // Для срезания всех объектов, которые выходят за пределы этого Rectangle
      24.  
      25. Rectangle
      26. {
      27. x: 0
      28. y: 0
      29. width: 80
      30. height: 80
      31.  
      32. color: "green"
      33.  
      34. }
      35. }
      36.  
      37. }

        qml_puthon_user
        • Nov. 20, 2019, 2:44 p.m.

        Я увидел, как обрезается в QtDesignStudio. Да, Clip срабатывает, и когда выносится внутренний Rectangle за границу внешнего, внутренний обрезается. Но, получается, что Clip не распространяется на radius? Можно сделать так, чтобы при скруглении границ внешнего Rectangle, так же обрезались и у внутреннего?

        1. import QtQuick 2.12
        2. import QtQuick.Controls 2.3
        3.  
        4. ApplicationWindow
        5. {
        6. id:general_win
        7. visible: true
        8. width: 800
        9. height: 600
        10. title: qsTr("title")
        11.  
        12. Rectangle
        13. {
        14. x: 27
        15. y: 31
        16. width: 100
        17. height: 100
        18. color: "blue"
        19. radius: 30
        20.  
        21. clip: true // Для срезания всех объектов, которые выходят за пределы этого Rectangle
        22.  
        23. Column
        24. {
        25. width: parent.width
        26. height: parent.height
        27. Rectangle
        28. {
        29. x: 0
        30. y: 0
        31. width: parent.width
        32. height: parent.height / 2
        33.  
        34. color: "green"
        35.  
        36. }
        37.  
        38. Rectangle
        39. {
        40. x: 0
        41. y: 0
        42. width: parent.width
        43. height: parent.height / 2
        44.  
        45. color: "pink"
        46.  
        47. }
        48. }
        49. }
        50. }

        Для более понятного понимания того, что я хочу сделать.
        Я сделал внешний Rectangle и вставил в него ещё 2 Rectangle разными цветами. Теперь мне требуется, чтобы они повторили скругления от внешнего Rectangle.

          Evgenii Legotckoi
          • Nov. 20, 2019, 2:54 p.m.
          • The answer was marked as a solution.

          Мда, немного почитав другие форумы, я нашёл информацию о том, что clip действтиельно работает подобным образом. Это было сделано из-за соображений производительности. Это написано в багтрекере Qt.

          Но то, что вы хотите, можно сделать с помощью QtGraphicalEffects

          Вот код

          1. import QtQuick 2.12
          2. import QtQuick.Window 2.12
          3. import QtGraphicalEffects 1.13
          4.  
          5. Window {
          6. visible: true
          7. width: 640
          8. height: 480
          9. title: qsTr("Hello World")
          10.  
          11. Rectangle {
          12. id: rect
          13. x: 27
          14. y: 31
          15. width: 100
          16. height: 100
          17. radius: 30
          18. color: "blue"
          19. clip: true
          20.  
          21. layer.enabled: true
          22. layer.effect: OpacityMask {
          23. maskSource: Item {
          24. width: rect.width
          25. height: rect.height
          26. Rectangle {
          27. anchors.centerIn: parent
          28. width: rect.adapt ? rect.width : Math.min(rect.width, rect.height)
          29. height: rect.adapt ? rect.height : width
          30. radius: 30
          31. }
          32. }
          33. }
          34.  
          35. Rectangle {
          36. x: 0
          37. y: 0
          38. width: 80
          39. height: 80
          40.  
          41. color: "green"
          42. }
          43. }
          44. }
          45.  

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

            qml_puthon_user
            • Nov. 20, 2019, 3:54 p.m.

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

              Evgenii Legotckoi
              • Nov. 20, 2019, 3:57 p.m.

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

              1. import QtQuick 2.12
              2. import QtQuick.Controls 2.3
              3. import QtGraphicalEffects 1.13
              4.  
              5. ApplicationWindow {
              6.  

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

                qml_puthon_user
                • Nov. 20, 2019, 4:04 p.m.

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

                  qml_puthon_user
                  • Dec. 5, 2019, 11:07 p.m.

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

                    Evgenii Legotckoi
                    • Dec. 6, 2019, 3:12 a.m.

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

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

                      Comments

                      Only authorized users can post comments.
                      Please, Log in or Sign up
                      • Last comments
                      • AK
                        April 1, 2025, 11:41 a.m.
                        Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
                      • Evgenii Legotckoi
                        March 9, 2025, 9:02 p.m.
                        К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…
                      • VP
                        March 9, 2025, 4:14 p.m.
                        Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
                      • ИМ
                        Nov. 22, 2024, 9:51 p.m.
                        Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                      • Evgenii Legotckoi
                        Oct. 31, 2024, 11:37 p.m.
                        Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup