BlinCT
BlinCT30 апреля 2016 г. 13:11

Выпадающий подпункт в меню при нажатии. Разработка под QML

меню, qml, выпадающий пункт меню

Еще раз всем привет.
Обращаюсь скорее по вариантам, советам в подходе к решению вот такой проблемы:
Есть какие-то пункты меню, представляющие из себя:

ColumnLayout
{
    Rectangle
    {
        id: menuItem1
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.top: parent.top
        height: dp(30)
        Text
        {
            id: textItem1
            anchors.fill: parent
        }
        MouseArea
        {
            anchors.fill: parent
            onPressed: parent.color = "lightblue"
            onReleased: parent.color = "red"
        }
    }
    //контент который должен появится при нажатии на пункт меню
    Rectangle 
    {
        id: rectMenuContent1
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.top: menuItem1.bottom
        Loader 
        {
            id: loader1
            anchors.fill: parent
            source: "menucontent1.qml" //Подгружаемый внешний файл с пунктами настроек
        }
    }
    //
    Rectangle
    {
        id: menuItem2
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.margins: dp(3)
        anchors.top: rectMenuContent1.bottom
        height: dp(30)
        Text
        {
            id: textItem2
            anchors.fill: parent
        }
    }
 
    Rectangle
    {
        id: menuItem3
        Layout.alignment: Qt.AlignCenter
        Layout.fillWidth: true
        anchors.margins: dp(3)
        anchors.top: menuItem2.bottom
        height: dp(30)
        Text
        {
            id: textItem3
            anchors.fill: parent
        }
    }
 
}

Задача такая, при нажатии на какой-то из пунктов под ним должен появится, сдвигая вниз остальные какой-то контент. В данном случае это rectangle id: rectMenuContent1.
Его я туда поместил только ради демонстрации.
Вопрос: какими возможностями можно добиться такого результата? То есть нажали, пункт раскрылся, снова нажали и все скрылось, и так с каждым. Посоветуйте пожалуйста и если даже есть подобное что-то с примером, то как это можно сделать. Скорее всего тут надо будет что-то с якорями делать. По этому вариант как из урока Евгения с Drawer мне кажется не подходящим. Хотя я могу и ошибаться из-за малых знаний.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

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

13
iG
  • 30 апреля 2016 г. 15:36
  • Ответ был помечен как решение.

Это неполное решение, но работает.

main.qml

Window {
    visible: true
    width: 640
    height: 480
 
    Flickable{
        anchors.fill: parent
        contentHeight: controlsColumn.height
        Column{
            id: controlsColumn
            spacing: 5
            anchors{
                left: parent.left
                right: parent.right
                margins: 5
            }
            MyItem{ text: "MyItem1"; source: "Controll/one.qml"}
            MyItem{ text: "MyItem2"; source: "Controll/two.qml"}
            MyItem{ text: "MyItem3"; source: "Controll/three.qml"}
 
        }
    }
}

MyItem.qml

import QtQuick 2.0
 
Rectangle{
    property alias text: textItem.text
    height: container.visible ? columns.height+5 : 30
    property alias source: loader.source
    anchors { left: parent.left; right: parent.right }
    color: "#53d769"
    clip: true
    Column{
        id: columns
        anchors.left: parent.left
        anchors.right: parent.right
        Text {
            x: 5
            id: textItem
            height: 30
            verticalAlignment: Text.AlignVCenter
        }
        Rectangle{
            id: container
            visible: false
            color: Qt.darker("#53d769", 1.2)
            anchors { left: parent.left; right: parent.right; margins: 5}
            height: loader.height+10
            Loader{
                y: 5
                anchors { left: parent.left; right: parent.right; margins: 5}
                id: loader
                source: loadCmp
            }
        }
 
    }
    Behavior on height {
        NumberAnimation { duration: 100 }
    }
 
    MouseArea{
        height: 30
        anchors { left: parent.left; right: parent.right }
        onClicked: {
            container.visible = !container.visible
        }
 
    }
}

listcontroll.zip

    BlinCT
    • 30 апреля 2016 г. 16:35

    Это неполное решение но работает

    А вы пробовали собрать?
    И как понять что это не полное решение?
    У меня почему то при сборке с этим кодом ошибка [main.o] Error2 вылетает(

      iG
      • 30 апреля 2016 г. 17:06

      мздец
      1 способ (без сборки)
      Открыть файл ListControll.qmlproject в QtCreator-ре и запустить проект

      2 способ (без сборки)
      Запустить файл main.qml c помощью qmlscene.exe
      например:
      d:\temp\Qt\5.6\msvc2015_64\bin\qmlscene.exe main.qml

      3 способ
      Тот которым пользуетесь вы
      [main.o] Error2 никакого отношения к qml не имеет

        iG
        • 30 апреля 2016 г. 17:45
          BlinCT
          • 30 апреля 2016 г. 19:12
          Вот честно не пойму, на что он ругается. Как добавил этот код, так стала вылетать эта ошибка.
            BlinCT
            • 30 апреля 2016 г. 20:13
            В общем нашёл, в чем проблема, всё запускается). Странно только, что строка
            height: container.visible ? columns.height + 5 : 30
            в вашем примере при открытии пункта меню высота идет полная на все, что там находится, то есть все элементы видны. А вот у меня почему-то открывается на +5 высоты.
              iG
              • 30 апреля 2016 г. 20:24
              а файлы скопировал
              Controll/one.qml
              Controll/two.qml
              Controll/three.qml
                Evgenii Legotckoi
                • 1 мая 2016 г. 0:29

                У меня почему то при сборке с этим кодом ошибка [main.o] Error2 вылетает(

                Чаще всего такая ошибка появляется из-за мусорных недособранных выходных файлов.
                Обычно помогает очистка проекта и его пересборка.

                  BlinCT
                  • 1 мая 2016 г. 10:05

                  а файлы скопировал
                  Controll/one.qml
                  Controll/two.qml
                  Controll/three.qml

                  Это понятно. Я посмотрел ваш пример, и как написал, что в вашем случае панель подменю раскрывается на высоту того контента, что передается с другого файла. Но у меня при тех же настройках он не открывается настолько.

                    BlinCT
                    • 1 мая 2016 г. 12:53

                    Чаще всего такая ошибка появляется из-за мусорных недособранных выходных файлов.
                    Обычно помогает очистка проекта и его пересборка.

                    Ошибка оказалась в том, что я сделал копию каталога с проектом, и в нем оказалась часть названия на русском. Удалил русскую надпись, и все норм стало).

                      BlinCT
                      • 1 мая 2016 г. 13:24
                      Нашёл ошибку и в расположении по высоте элементов. Хотя может это и не совсем ошибка.
                      У меня стоял rectangle в котором был ColumnLayout и в нем снова rectangle.
                      Возможно снова с наследованием и якорями, но убрал родительский первый, и все стало компоноваться нормально.
                        iG
                        • 1 мая 2016 г. 13:39

                        скорее всего rectangle имеет некорректную высоту.

                        rectangle.height: ColumnLayout.height

                          Evgenii Legotckoi
                          • 2 мая 2016 г. 1:48

                          Возможно снова с наследованием и якорями

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

                            Комментарии

                            Только авторизованные пользователи могут публиковать комментарии.
                            Пожалуйста, авторизуйтесь или зарегистрируйтесь
                            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 для меня не была возможна, ибо он писался…

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