qml_puthon_user
qml_puthon_user5 декабря 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")
            }
        }
    }
    

      Комментарии

      Только авторизованные пользователи могут публиковать комментарии.
      Пожалуйста, авторизуйтесь или зарегистрируйтесь
      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
      Последние комментарии
      i
      innorwall11 ноября 2024 г. 22:12
      Django - Урок 055. Как написать функционал auto populate field Freckles because of several brand names retin a, atralin buy generic priligy
      i
      innorwall11 ноября 2024 г. 18:23
      QML - Урок 035. Использование перечислений в QML без 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
      innorwall11 ноября 2024 г. 15:50
      Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле 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
      innorwall11 ноября 2024 г. 14:19
      Алгоритм сортировки кучей The role of raloxifene in preventing breast cancer priligy precio
      i
      innorwall11 ноября 2024 г. 13:55
      PyQt5 - Урок 006. Работа с QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
      Сейчас обсуждают на форуме
      i
      innorwall11 ноября 2024 г. 20:56
      добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
      i
      innorwall11 ноября 2024 г. 10:55
      Всё ещё разбираюсь с кешем. 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
      9Anonim25 октября 2024 г. 9:10
      Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
      ИМ
      Игорь Максимов3 октября 2024 г. 4:05
      Реализация навигации по разделам Спасибо Евгений!

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