elyana
March 17, 2020, 7:24 a.m.

Drawer QML

В документации к Drawer Qml Type указано свойство position, но я так и не поняла как его применять, может кто-нибудь показать пример?
Также, при выдвижении drawer'a остальная часть экрана затемняется, как убрать эту тень я тоже не нашла. Были какие-то примеры с Overlay.model, но это не работает, а точнее, делает прозрачным весь drawer

3

Do you like it? Share on social networks!

25
Evgenii Legotckoi
  • March 17, 2020, 3:47 p.m.

Добрый день

position - это свойство, которое отвечает за то, насколько Drawer выдвинут, если там 1, то он полностью открыт, если 0, то полностью скрыт.
Если хотите изменить, откуда выдвигается Drawer, то нужно менять свойство edge

    elyana
    • March 17, 2020, 5:39 p.m.

    Я понимаю, что position это положение до и после, мне нужен пример синтаксиса. Я, например, писала:
    position: 0.3
    Но это не срабатывало

      Evgenii Legotckoi
      • March 17, 2020, 5:46 p.m.

      В документации этого не написано, но полагаю, что это readonly свойство, вы ничего не сможете туда установить, только считать.
      Для открытия и закрытия есть методы open() , close()

        elyana
        • March 17, 2020, 6:14 p.m.
        • (edited)

        Да, но как тогда поместить на экран часть drawer'a так, чтобы она выходила из-за границ окна, margin и padding не работают

          Evgenii Legotckoi
          • March 17, 2020, 6:15 p.m.
          • The answer was marked as a solution.

          Никак. Или писать свой собственный кастомный Drawer с нуля или пересмотреть задачу и подумать над иным решением.

            Evgenii Legotckoi
            • March 17, 2020, 6:17 p.m.

            Свойство position отвечает за обработку пальцами на экране, то есть насколько drawer был выдвинут, но не для фиксированного кастомного положения drawer на экране.

              Evgenii Legotckoi
              • March 17, 2020, 6:18 p.m.
              • (edited)

              Впрочем у меня есть мысль, Drawer наследован от объекта Popup, а он уже имеет свойство x, попробуйте изменить его, то есть координату x

              1. Drawer {
              2. x: 50
              3. }
                elyana
                • March 17, 2020, 6:20 p.m.

                Пыталась написать что-то своё на javascript'e, но мне почему то постоянно выдавало ошибку "mouseXY is not defined", при вызове функции через onClicked(), и не важно, что там было изменение цвета, сообщение в консоль или же изменение координат. Не знаете, почему так происходит?

                  elyana
                  • March 17, 2020, 6:27 p.m.

                  Координаты, это первое, что я меняла -- бесполезно

                    Evgenii Legotckoi
                    • March 17, 2020, 6:27 p.m.

                    если onClicked вообще вызывалось, поскольку такого обработчика у Drawer нет

                      elyana
                      • March 17, 2020, 6:30 p.m.

                      В drawer'e была Button/MouseArea, оттуда и вызывался onClicked()

                        Evgenii Legotckoi
                        • March 17, 2020, 6:34 p.m.

                        тогда, без кода трудно что-то утверждать

                          Serj Demchenko
                          • March 17, 2020, 6:45 p.m.
                          • (edited)

                          Можно использовать как обычный компонент

                          1. ...
                          2. Drawer {
                          3. id: expanderMenu
                          4. width: window.width/3.5
                          5. height: window.height
                          6. }
                          7. ...

                          или вы хотите переопределить чтобы он допустим сверху открывался?

                            elyana
                            • March 17, 2020, 6:56 p.m.
                            • (edited)

                            С edge у меня проблем нет, мне нужно, чтобы он торчал из-за границы окна, например, на 10-ю часть своего размера
                            Примерно так:

                              Serj Demchenko
                              • March 17, 2020, 7:15 p.m.

                              Так?

                              1. Drawer {
                              2. id: drawer
                              3. width: window.width
                              4. height:0.1 * window.height
                              5. edge: Qt.BottomEdge
                              6.  
                              7. }
                                Evgenii Legotckoi
                                • March 17, 2020, 7:17 p.m.
                                • (edited)

                                не думаю, что это будет правильным решением, вы просто устанавливаете высоту drawer, то есть скрытой части не будет совсем, а здесь нужно, чтобы 80 процентов того Drawer была за экраном. А у вас будет 100 процентов в экране

                                  Evgenii Legotckoi
                                  • March 17, 2020, 7:19 p.m.

                                  Кстати, если у вас Drawer снизу, то не пробовали установить координаты так

                                  1. Window {
                                  2. id: window
                                  3.  
                                  4. Drawer {
                                  5. y: window.height - 50
                                  6. }
                                  7.  
                                  8. }
                                    Serj Demchenko
                                    • March 17, 2020, 7:23 p.m.
                                    • (edited)

                                    Не получится так, drawer вписан в окно, можно попробовать сделать custom dialog и его прибиндить к окну

                                      elyana
                                      • March 17, 2020, 7:24 p.m.

                                      Изменение размера ничего не даст. Он всё равно на начальном этапе будет x:0 y:0

                                        Evgenii Legotckoi
                                        • March 17, 2020, 7:26 p.m.

                                        Тогда можете попытаться адаптировать для себя этот пример QML - Урок 019. Navigation Drawer в Qt Qml Android

                                        Он старый и в некоторых случаях работает криво, но вполне работоспособен

                                          elyana
                                          • March 17, 2020, 7:28 p.m.

                                          Спасибо, возможно, Popup будет работать как мне нужно...

                                            Serj Demchenko
                                            • March 17, 2020, 7:42 p.m.
                                            • (edited)

                                            Попробуйте так:

                                            1. import QtQuick 2.7
                                            2. import QtQuick.Controls 2.0
                                            3. import QtQuick.Dialogs 1.3
                                            4.  
                                            5. ApplicationWindow {
                                            6. id: window
                                            7. Drawer {
                                            8. id: drawer
                                            9. width: window.width
                                            10. height:0.31 * window.height
                                            11.  
                                            12. edge: Qt.BottomEdge
                                            13. onOpened:{
                                            14. drawer.close()
                                            15. popup.open()
                                            16.  
                                            17. }
                                            18. }
                                            19. Popup {
                                            20. id: popup
                                            21. x: 0
                                            22. y: 100
                                            23. width: window.width
                                            24. height: window.height / 3
                                            25. modal: true
                                            26. focus: true
                                            27. closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
                                            28. }
                                            29. }

                                            с y: поиграетесь и всё

                                              Serj Demchenko
                                              • March 17, 2020, 7:46 p.m.
                                              • (edited)

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

                                                elyana
                                                • March 17, 2020, 7:53 p.m.
                                                • (edited)

                                                Скорее всего, нужно вместо Window использовать Item: привязать его к верху экрана и уменьшить размер на 10%, и туда тогда засовывать drawer, который выдвигается снизу

                                                  Serj Demchenko
                                                  • March 17, 2020, 8:17 p.m.

                                                  можно еще как костыль:

                                                  1. import QtQuick 2.7
                                                  2. import QtQuick.Controls 2.0
                                                  3. import QtQuick.Dialogs 1.3
                                                  4.  
                                                  5. ApplicationWindow {
                                                  6. id: window
                                                  7. width: 320
                                                  8. height: 240
                                                  9. x:500
                                                  10. y:500
                                                  11. Component.onCompleted: {
                                                  12. popup.setX(window.x)
                                                  13. popup.setY(window.y+popup.height*2.3);
                                                  14. // + запретить перетаскивание popup
                                                  15. }
                                                  16. Drawer {
                                                  17. id: drawer
                                                  18. width: window.width
                                                  19. height:0.31 * window.height
                                                  20. edge: Qt.BottomEdge
                                                  21. onOpened:{
                                                  22. drawer.close()
                                                  23. popup.open()
                                                  24. }
                                                  25. }
                                                  26. Dialog {
                                                  27. id: popup
                                                  28. modality:Qt.NonModal
                                                  29. width: window.width
                                                  30. height: window.height / 3
                                                  31. }
                                                  32. }
                                                  33.  
                                                  34.  

                                                    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