подобие 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? Или есть что-то попроще и получше?
Спасибо!
2
99
Do you like it? Share on social networks!
- Last comments
- AKApril 1, 2025, 11:41 a.m.Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
- VPMarch 9, 2025, 4:14 p.m.Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
- ИМNov. 22, 2024, 9:51 p.m.Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
- Now discuss on the forum
- МАApril 1, 2025, 4:21 p.m.0ff763fe-4e50-455d-a3a6-5699c243b1a5_17_44_22_1.xml
- fFeb. 15, 2025, 1:46 p.m.Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
- Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
- Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
Добрый день.
Изучите вот эту статью - QML - Урок 018. Loader в QML Qt - динамическая работа с компонентами . Там по сути используется нужный вам функционал. Но вам нужно использовать или Loader или StackView, в той статье описывается применение Loader.
Статья немного устарела, но при этом актуальна. Вам нужно только использовать QtQuick 2 в своём коде. Там написано на QtQuick 1. Разница будет только в импортах, а код должен быть одинаковым в обоих случаях.
Вот код, вдруг, кому поможет.
Код основной формы:
Код панели меню:
Код Panel_1:
Код Panel_2: