elyana
17 марта 2020 г. 7:24

Drawer QML

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

3

Вам это нравится? Поделитесь в социальных сетях!

25
Evgenii Legotckoi
  • 17 марта 2020 г. 15:47

Добрый день

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

    elyana
    • 17 марта 2020 г. 17:39

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

      Evgenii Legotckoi
      • 17 марта 2020 г. 17:46

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

        elyana
        • 17 марта 2020 г. 18:14
        • (ред.)

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

          Evgenii Legotckoi
          • 17 марта 2020 г. 18:15
          • Ответ был помечен как решение.

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

            Evgenii Legotckoi
            • 17 марта 2020 г. 18:17

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

              Evgenii Legotckoi
              • 17 марта 2020 г. 18:18
              • (ред.)

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

              1. Drawer {
              2. x: 50
              3. }
                elyana
                • 17 марта 2020 г. 18:20

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

                  elyana
                  • 17 марта 2020 г. 18:27

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

                    Evgenii Legotckoi
                    • 17 марта 2020 г. 18:27

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

                      elyana
                      • 17 марта 2020 г. 18:30

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

                        Evgenii Legotckoi
                        • 17 марта 2020 г. 18:34

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

                          Serj Demchenko
                          • 17 марта 2020 г. 18:45
                          • (ред.)

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

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

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

                            elyana
                            • 17 марта 2020 г. 18:56
                            • (ред.)

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

                              Serj Demchenko
                              • 17 марта 2020 г. 19:15

                              Так?

                              1. Drawer {
                              2. id: drawer
                              3. width: window.width
                              4. height:0.1 * window.height
                              5. edge: Qt.BottomEdge
                              6.  
                              7. }
                                Evgenii Legotckoi
                                • 17 марта 2020 г. 19:17
                                • (ред.)

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

                                  Evgenii Legotckoi
                                  • 17 марта 2020 г. 19:19

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

                                  1. Window {
                                  2. id: window
                                  3.  
                                  4. Drawer {
                                  5. y: window.height - 50
                                  6. }
                                  7.  
                                  8. }
                                    Serj Demchenko
                                    • 17 марта 2020 г. 19:23
                                    • (ред.)

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

                                      elyana
                                      • 17 марта 2020 г. 19:24

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

                                        Evgenii Legotckoi
                                        • 17 марта 2020 г. 19:26

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

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

                                          elyana
                                          • 17 марта 2020 г. 19:28

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

                                            Serj Demchenko
                                            • 17 марта 2020 г. 19:42
                                            • (ред.)

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

                                            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
                                              • 17 марта 2020 г. 19:46
                                              • (ред.)

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

                                                elyana
                                                • 17 марта 2020 г. 19:53
                                                • (ред.)

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

                                                  Serj Demchenko
                                                  • 17 марта 2020 г. 20:17

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

                                                  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.  

                                                    Комментарии

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