BlinCT
BlinCTApril 30, 2016, 1:11 p.m.

Выпадающий подпункт в меню при нажатии. Разработка под 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 мне кажется не подходящим. Хотя я могу и ошибаться из-за малых знаний.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

13
iG
  • April 30, 2016, 3:36 p.m.
  • The answer was marked as a solution.

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

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
    • April 30, 2016, 4:35 p.m.

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

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

      iG
      • April 30, 2016, 5:06 p.m.

      мздец
      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
        • April 30, 2016, 5:45 p.m.
          BlinCT
          • April 30, 2016, 7:12 p.m.
          Вот честно не пойму, на что он ругается. Как добавил этот код, так стала вылетать эта ошибка.
            BlinCT
            • April 30, 2016, 8:13 p.m.
            В общем нашёл, в чем проблема, всё запускается). Странно только, что строка
            height: container.visible ? columns.height + 5 : 30
            в вашем примере при открытии пункта меню высота идет полная на все, что там находится, то есть все элементы видны. А вот у меня почему-то открывается на +5 высоты.
              iG
              • April 30, 2016, 8:24 p.m.
              а файлы скопировал
              Controll/one.qml
              Controll/two.qml
              Controll/three.qml
                Evgenii Legotckoi
                • May 1, 2016, 12:29 a.m.

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

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

                  BlinCT
                  • May 1, 2016, 10:05 a.m.

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

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

                    BlinCT
                    • May 1, 2016, 12:53 p.m.

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

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

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

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

                        rectangle.height: ColumnLayout.height

                          Evgenii Legotckoi
                          • May 2, 2016, 1:48 a.m.

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

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

                            Comments

                            Only authorized users can post comments.
                            Please, Log in or Sign up
                            AD

                            C ++ - Test 004. Pointers, Arrays and Loops

                            • Result:50points,
                            • Rating points-4
                            m

                            C ++ - Test 004. Pointers, Arrays and Loops

                            • Result:80points,
                            • Rating points4
                            m

                            C ++ - Test 004. Pointers, Arrays and Loops

                            • Result:20points,
                            • Rating points-10
                            Last comments
                            i
                            innorwallNov. 11, 2024, 10:12 p.m.
                            Django - Tutorial 055. How to write auto populate field functionality Freckles because of several brand names retin a, atralin buy generic priligy
                            i
                            innorwallNov. 11, 2024, 6:23 p.m.
                            QML - Tutorial 035. Using enumerations in QML without 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
                            innorwallNov. 11, 2024, 3:50 p.m.
                            Qt/C++ - Lesson 052. Customization Qt Audio player in the style of 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
                            innorwallNov. 11, 2024, 2:19 p.m.
                            Heap sorting algorithm The role of raloxifene in preventing breast cancer priligy precio
                            i
                            innorwallNov. 11, 2024, 1:55 p.m.
                            PyQt5 - Lesson 006. Work with QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
                            Now discuss on the forum
                            i
                            innorwallNov. 11, 2024, 8:56 p.m.
                            добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
                            i
                            innorwallNov. 11, 2024, 10:55 a.m.
                            Всё ещё разбираюсь с кешем. 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
                            9AnonimOct. 25, 2024, 9:10 a.m.
                            Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                            Follow us in social networks