подобие 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
Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.Вам це подобається? Поділіться в соціальних мережах!
- Akiv Doros
- 11 листопада 2024 р. 14:58
C++ - Тест 004. Указатели, Массивы и Циклы
- Результат:50бали,
- Рейтинг балів-4
- molni99
- 26 жовтня 2024 р. 01:37
C++ - Тест 004. Указатели, Массивы и Циклы
- Результат:80бали,
- Рейтинг балів4
- molni99
- 26 жовтня 2024 р. 01:29
C++ - Тест 004. Указатели, Массивы и Циклы
- Результат:20бали,
- Рейтинг балів-10
Добрый день.
Изучите вот эту статью - QML - Урок 018. Loader в QML Qt - динамическая работа с компонентами . Там по сути используется нужный вам функционал. Но вам нужно использовать или Loader или StackView, в той статье описывается применение Loader.
Статья немного устарела, но при этом актуальна. Вам нужно только использовать QtQuick 2 в своём коде. Там написано на QtQuick 1. Разница будет только в импортах, а код должен быть одинаковым в обоих случаях.
Вот код, вдруг, кому поможет.
Код основной формы:
Код панели меню:
Код Panel_1:
Код Panel_2: