qml_puthon_user
qml_puthon_userЖел. 5, 2019, 3:27 Т.Ж.

подобие TabControl на qml

Доброго времени суток.
Пытаюсь реализовать отображение панелей (Pane) по нажатию лейблов(кнопок) на основной форме.
Код основной формы:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

import "./Components/Panels" as Panels

ApplicationWindow
{
    id: general_win
    visible: true
    width: 800
    height: 600
    title: qsTr("Test title")

    Rectangle 
    {
        color: "yellow"
        id: mainwindow

        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        Panels.Panel_menu
        {
            id: p_men
        }

        Panels.Panel_top
        {
            id: p_t
            anchors.left: p_men.right
        }

        Panels.Panel_1
        {
            anchors.top: p_t.bottom
            anchors.left: p_men.right
        }

        Panels.Panel_2
        {
            anchors.top: p_t.bottom
            anchors.left: p_men.right
        }
    }
}

Код панели меню:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Pane 
{
    id: panel_menu
    width: 270
    height: 480
    padding: 0

    Rectangle 
    {
        width: panel_menu.width
        height: panel_menu.height
        color: "green"

        Column 
        {
            id: column
            x: 0
            y: 0
            width: panel_menu.width
            height: general_win.height

            Label 
            {
                id: lbl_p1
                width: panel_menu.width
                height: 50
                text: qsTr("Panel_1")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: "#ffffff"
                background: Rectangle 
                {
                    id: lbl_p11
                    color: "#2d343d"
                }

                MouseArea 
                {
                    id: mouseArea_1
                    x: 0
                    y: 25
                    anchors.fill: lbl_p11
                    hoverEnabled: true

                    onEntered: lbl_p11.color = "#289ed7"
                    onExited: lbl_p11.color = "#2d343d"

                    onClicked: 
                    {
                        Panel_1.visible = true
                        Panel_2.visible = false
                    }
                }
            }

            Label 
            {
                id: lbl_2
                width: panel_menu.width
                height: 50
                text: qsTr("Panel_2")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                color: "#ffffff"
                background: Rectangle 
                {
                    id: lbl_22
                    color: "#2d343d"
                }

                MouseArea 
                {
                    id: mouseArea_2
                    x: 0
                    y: 25
                    anchors.fill: lbl_2
                    hoverEnabled: true

                    onEntered: lbl_22.color = "#289ed7"
                    onExited: lbl_22.color = "#2d343d"

                    onClicked: 
                    {
                        Panel_1.visible = false
                        Panel_2.visible = true
                    }
                }
            }
        }
    }
}

Код Panel_1:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Pane 
{
    id: p1
    x: 170
    y: 35
    width: 470
    height: 445
    padding: 0
    visible: true

    anchors.top: Panel_top.bottom
    anchors.left: Panel_menu.right
    anchors.right: mainwindow.right
    anchors.bottom: mainwindow.bottom

    Rectangle
    {
        id: p1_content
        width: p1.width
        height: p1.height
        color: "#EB1EA6"
        Label
        {
            text: qsTr("Panel_1")
        }
    }

}

Код Panel_2:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

Pane 
{
    id: p2
    x: 170
    y: 35
    width: 470
    height: 445
    padding: 0
    visible: false

    anchors.top: Panel_top.bottom
    anchors.left: Panel_menu.right
    anchors.right: mainwindow.right
    anchors.bottom: mainwindow.bottom

    Rectangle
    {
        id: p2_content
        width: p2.width
        height: p2.height
        color: "#92D161"
        Label
        {
            text: qsTr("Panel_2")
        }
    }

}

Обработчик нажатий у меня реализован в Panel_menu. Когда кликаю на lbl_p1, по идее, Panel_1 должна отобразиться, а Panel_2 оставаться скрытой и когда кликаю на lbl_p2, наоборот, Panel_1 должна скрыться, а Panel_2 отобразиться.
Мне нужно как-то передать событие onClicked с Panel_menu в главную форму? Или на главной форме делать обработчик onClicked? Или есть что-то попроще и получше?

Спасибо!

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

Ол саған ұнайды ма? Әлеуметтік желілерде бөлісіңіз!

2
Evgenii Legotckoi
  • Жел. 5, 2019, 3:37 Т.Ж.
  • (өңделген)
  • Жауап шешім ретінде белгіленді.

Добрый день.

Изучите вот эту статью - QML - Урок 018. Loader в QML Qt - динамическая работа с компонентами . Там по сути используется нужный вам функционал. Но вам нужно использовать или Loader или StackView, в той статье описывается применение Loader.

Статья немного устарела, но при этом актуальна. Вам нужно только использовать QtQuick 2 в своём коде. Там написано на QtQuick 1. Разница будет только в импортах, а код должен быть одинаковым в обоих случаях.

    qml_puthon_user
    • Жел. 5, 2019, 4:27 Т.Ж.

    Вот код, вдруг, кому поможет.
    Код основной формы:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    import "./Components/Panels" as Panels
    
    ApplicationWindow
    {
        id: general_win
        visible: true
        width: 1000
        height: 600
        title: qsTr("Test title")
    
        Rectangle 
        {
            color: "yellow"
            id: mainwindow
    
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
    
            Panels.Panel_menu
            {
                id: p_men
            }
    
            Panels.Panel_top
            {
                id: p_t
                anchors.left: p_men.right
            }
    
            Loader 
            {
                id: loader
                anchors.top: p_t.bottom
                anchors.left: p_men.right
                anchors.right: mainwindow.right
                anchors.bottom: mainwindow.bottom
    
            }
        }
    }
    

    Код панели меню:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    Pane 
    {
        id: panel_menu
        width: 270
        height: 480
        padding: 0
    
        Rectangle 
        {
            width: panel_menu.width
            height: panel_menu.height
            color: "green"
    
            Column 
            {
                id: column
                x: 0
                y: 0
                width: panel_menu.width
                height: general_win.height
    
                Label 
                {
                    id: lbl_p1
                    width: panel_menu.width
                    height: 50
                    text: qsTr("Panel_1")
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: "#ffffff"
                    background: Rectangle 
                    {
                        id: lbl_p11
                        color: "#2d343d"
                    }
    
                    MouseArea 
                    {
                        id: mouseArea_1
                        x: 0
                        y: 25
                        anchors.fill: lbl_p11
                        hoverEnabled: true
    
                        onEntered: lbl_p11.color = "#289ed7"
                        onExited: lbl_p11.color = "#2d343d"
    
                        onClicked: 
                        {
                            loader.source = "Panel_1.qml"
                        }
                    }
                }
    
                Label 
                {
                    id: lbl_2
                    width: panel_menu.width
                    height: 50
                    text: qsTr("Panel_2")
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    color: "#ffffff"
                    background: Rectangle 
                    {
                        id: lbl_22
                        color: "#2d343d"
                    }
    
                    MouseArea 
                    {
                        id: mouseArea_2
                        x: 0
                        y: 25
                        anchors.fill: lbl_2
                        hoverEnabled: true
    
                        onEntered: lbl_22.color = "#289ed7"
                        onExited: lbl_22.color = "#2d343d"
    
                        onClicked: 
                        {
                            loader.source = "Panel_2.qml"
                        }
                    }
                }
            }
        }
    }
    

    Код Panel_1:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    Pane 
    {
        id: p1
        width: 470
        height: 445
        padding: 0
        visible: true
    
        Rectangle
        {
            id: p1_content
            width: p1.width
            height: p1.height
            color: "#EB1EA6"
    
            Label
            {
                text: qsTr("Panel_1")
            }
        }   
    }
    

    Код Panel_2:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.3
    
    Pane 
    {
        id: p2
        width: 470
        height: 445
        padding: 0
        visible: true
    
        Rectangle
        {
            id: p2_content
            width: p2.width
            height: p2.height
            color: "#92D161"
            Label
            {
                text: qsTr("Panel_2")
            }
        }
    }
    

      Пікірлер

      Тек рұқсаты бар пайдаланушылар ғана пікір қалдыра алады.
      Кіріңіз немесе Тіркеліңіз
      Г

      C++ - Тест 001. Первая программа и типы данных

      • Нәтиже:66ұпай,
      • Бағалау ұпайлары-1
      t

      C++ - Тест 001. Первая программа и типы данных

      • Нәтиже:33ұпай,
      • Бағалау ұпайлары-10
      t

      Qt - Тест 001. Сигналы и слоты

      • Нәтиже:52ұпай,
      • Бағалау ұпайлары-4
      Соңғы пікірлер
      G
      GoattRockҚыр. 3, 2024, 1:50 Т.Қ.
      Linux жүйесінде файлдарды қалай көшіруге болады Задумывались когда-нибудь о том, как мы привыкли доверять свои вещи службам грузоперевозок? Сейчас такие услуги стали неотъемлемой частью нашей жизни, особенно когда речь идет о переездах между …
      d
      dblas5Шілде 5, 2024, 11:02 Т.Ж.
      QML - Сабақ 016. SQLite деректер қоры және онымен QML Qt-та жұмыс істеу Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
      k
      kmssrАқп. 8, 2024, 6:43 Т.Қ.
      Qt Linux - Сабақ 001. Linux астында Autorun Qt қолданбасы как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
      АК
      Анатолий КононенкоАқп. 5, 2024, 1:50 Т.Ж.
      Qt WinAPI - Сабақ 007. Qt ішінде ICMP Ping арқылы жұмыс істеу Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
      Енді форумда талқылаңыз
      Evgenii Legotckoi
      Evgenii LegotckoiМаусым 24, 2024, 3:11 Т.Қ.
      добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
      F
      FynjyШілде 22, 2024, 4:15 Т.Ж.
      при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …
      BlinCT
      BlinCTМаусым 25, 2024, 1 Т.Ж.
      Нарисовать кривую в qml Всем привет. Имеется Лист листов с тосками, точки получаны интерполяцией Лагранжа. Вопрос, как этими точками нарисовать кривую? ChartView отпадает сразу, в qt6.7 появился новый элемент…
      BlinCT
      BlinCTМамыр 5, 2024, 5:46 Т.Ж.
      Написать свой GraphsView Всем привет. В Qt есть давольно старый обьект дял работы с графиками ChartsView и есть в 6.7 новый но очень сырой и со слабым функционалом GraphsView. По этой причине я хочу написать х…
      Evgenii Legotckoi
      Evgenii LegotckoiМамыр 2, 2024, 2:07 Т.Қ.
      Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Добрый день. По моему мнению - да, но то, что будет касаться вызовов к функционалу Андроида, может создать огромные трудности.

      Бізді әлеуметтік желілерде бақылаңыз