import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4
import QtQuick.Controls 2.1
Window
{
id: head
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Loader
{
id: loader
}
Component
{
id: rect
Window
{
id: ppp
visible: true
width: 164
height: 148
title: qsTr("Hello World")
}
}
Rectangle
{
anchors.fill: parent
color: "blue"
Rectangle
{
id: leftArea
height: 100
width: 100
color: "red"
MouseArea
{
anchors.fill: parent
onClicked:
{
loader.sourceComponent = rect
leftArea.parent = loader
}
}
}
}
When I click on that rectangle, it disapears but it doesn't get shown in the loader's window.
Moreover when I maximize the new resultant window the GUI hangs.
Aim is to make the new Loader's window the parent of the rectangle on click.
There's two issues with your code.
You should be using parent = loader.item, not parent = loader. You don't want the Loader to be your parent, but the item that it has loaded.
The Component that you're adding to the Loader is a Window, which is not a QQuickItem. You will get an error when trying to assign a Window as the visual parent of an Item. You can get around that by creating an Item inside the window and exposing that through a property using Window's contentItem property, like this:
Loader
{
id: loader
}
Component
{
id: rect
Window
{
id: ppp
visible: true
width: 164
height: 148
title: qsTr("Hello World")
}
}
Rectangle
{
anchors.fill: parent
color: "blue"
Rectangle
{
id: leftArea
height: 100
width: 100
color: "red"
MouseArea
{
anchors.fill: parent
onClicked:
{
loader.sourceComponent = rect
leftArea.parent = loader.item.contentItem
}
}
}
}
Related
i was try to create a button in bottom menu but i was facing a issue if i clicked a rect mouse area then the text is changing if i clicked the changed another function is working
i need a help how solve the issue
if i clicked gain then only gain options should be visible then if i clicked back every thing should be normal and also in gain if i click 1x then how to integrated with another qml file
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 1920
height: 1080
visible: true
title: qsTr("Hello World")
Rectangle{
width: parent.width
height: parent.height*0.1
anchors.bottom: parent.bottom
color:"#D9D9D9"
Rectangle{
id:back
height:parent.height
width:parent.width/6
color: "#D9D9D9"
border.width:1.5
border.color:"#b9bab8"
anchors.left: parent.left
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
back.color="#aba9a9"
}
onExited: {
back.color="#D9D9D9"
}
onClicked: {
gain.border.width=1
speed.border.width=1
filter.border.width=1
lead.border.width=1
setting.border.width=1
gaintxt.text="Gain"
speedtxt.text="Speed"
filtertxt.text="Filter"
leadtxt.text="Lead"
settingtxt.text="Settings"
btn()
}
}
Text {
id: backtxt
text: qsTr("Back")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:gain
height:parent.height
width:parent.width/6
color: "#D9D9D9"
anchors.left: back.right
state: "gain"
border.width:1.5
border.color:"#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
gain.color="#aba9a9"
}
onExited: {
gain.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
speedtxt.text="1x(mm/mv)"
filtertxt.text="2x(mm/mv)"
leadtxt.text="3x(mm/mv)"
settingtxt.text="4x(mm/mv)"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
//gain.state = (gain.state == "gain" ? "back" : "gain")
}
Text {
id: gaintxt
text: qsTr("Gain")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
Rectangle{
id:speed
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: gain.right
border.width:1.5
border.color: "#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
speed.color="#aba9a9"
}
onExited: {
speed.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Speed"
speedtxt.text="5"
filtertxt.text="10"
leadtxt.text="25"
settingtxt.text="50"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: speedtxt
text: qsTr("Speed")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:filter
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: speed.right
border.width:1.5
border.color:"#b9bab8"
MouseArea{
id:filtermouse
anchors.fill:parent
hoverEnabled:true
onEntered: {
filter.color="#aba9a9"
}
onExited: {
filter.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Filter"
speedtxt.text="20"
filtertxt.text="40"
leadtxt.text="100"
settingtxt.text="150"
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: filtertxt
text: qsTr("Fliter")
font.pixelSize: 25
font.family: nunito.name
anchors.centerIn:parent
}
}
Rectangle{
id:lead
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: filter.right
border.width:1.5
border.color:"#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
lead.color="#aba9a9"
}
onExited: {
lead.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
gaintxt.text="Lead"
speedtxt.text="3"
filtertxt.text="6"
leadtxt.text="12"
settingtxt.text=""
gaintxt.font.bold = true
gaintxt.color = "#001E60"
}
}
Text {
id: leadtxt
text: qsTr("Lead")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
Rectangle{
id:setting
height:parent.height
width:gain.width
color: "#D9D9D9"
anchors.left: lead.right
border.width:1.5
border.color: "#b9bab8"
MouseArea{
anchors.fill:parent
hoverEnabled:true
onEntered: {
setting.color="#aba9a9"
}
onExited: {
setting.color="#D9D9D9"
}
onClicked: {
parent.border.width=3
settingtxt.font.bold = true
settingtxt.color = "#001E60"
}
}
Text {
id: settingtxt
text: qsTr("Settings")
font.family: nunito.name
font.pixelSize: 25
anchors.centerIn:parent
}
}
}
}
}
Based on the various feedback, I did a major rewrite of the program.
MyApp.qml - the parent application that has the StackView
MainPage.qml - the main page that has the menu bar
SettingsPage.qml - a mock settings page
MainMenu.qml - contains the main menu bar
GainMenu.qml - contains the gain menu bar
SpeedMenu.qml - contains the speed menu bar
LeadMenu.qml - contains the lead menu bar
AppButton.qml - the big buttons on the menu bar
The refactor came about because I wanted to reduce complexity. The current implementations has these states:
MainPage with [Gain] [Speed] [Filter] [Lead] [Settings] menu buttons
MainPage with [Back] [1x] [2x] [3x] [4x] gain menu buttons
MainPage with [Back] [5] [10] [25] [50] speed menu buttons
MainPage with [Back] [20] [40] [100] [150] filter menu buttons
MainPage with [Back] [3] [6] [12] lead buttons
SettingsPage with [Back] button
Clicking on any of the buttons on the main menu will load either (1) a gain, speed, filter, or lead menu bar, (2) take you to the SettingsPage.
Clicking on the [Back] button will take you back to the MainPage and back to the main menu.
Click on any of the number buttons will set a property and then take you back to the MainPage and back to the main menu.
A StackView was used to navigate between MainPage.qml and SettingsPage.qml.
A Loader was used to load the various menus.
The stackView and menuBar, gain, speed, filter, and lead property's scope can be seen in multiple locations. This was necessary for the sub-page or the sub-menu to manipulate properties belonging to a parent page.
//MyApp.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
StackView {
id: stackView
anchors.fill: parent
initialItem: "MainPage.qml"
}
}
//MainPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
id: mainPage
property int gain: 0
property int speed: 0
property int filter: 0
property int lead: 0
header: Frame {
Text { text: "MainPage" }
}
Column {
anchors.centerIn: parent
spacing: 10
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "gain: " + gain + "x" }
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "speed: " + speed }
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "filter: " + filter }
}
Frame {
anchors.horizontalCenter: parent.horizontalCenter
Text { text: "lead: " + lead}
}
}
footer: Loader {
id: menuBar
source: "MainMenu.qml"
}
}
//SettingsPage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Page {
header: Frame {
Text { text: "SettingsPage" }
}
footer: Flow {
AppButton {
text: qsTr("Back")
onClicked: stackView.pop()
}
}
}
//MainMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Gain")
onClicked: {
menuBar.source = "GainMenu.qml"
}
}
AppButton {
text: qsTr("Speed")
onClicked: {
menuBar.source = "SpeedMenu.qml"
}
}
AppButton {
text: qsTr("Filter")
onClicked: {
menuBar.source = "FilterMenu.qml"
}
}
AppButton {
text: qsTr("Lead")
onClicked: {
menuBar.source = "LeadMenu.qml"
}
}
AppButton {
text: qsTr("Settings")
onClicked: stackView.push("SettingsPage.qml")
}
}
//GainMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [1,2,3,4]
AppButton {
text: modelData + "x"
onClicked: {
gain = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//SpeedMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [5, 10, 25, 50]
AppButton {
text: modelData
onClicked: {
speed = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//FilterMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [20, 40, 100, 150]
AppButton {
text: modelData
onClicked: {
filter = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//LeadMenu.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Flow {
AppButton {
text: qsTr("Back")
onClicked: back()
}
Repeater {
model: [3, 6, 12]
AppButton {
text: modelData
onClicked: {
lead = modelData;
back();
}
}
}
function back() {
menuBar.source = "MainMenu.qml"
}
}
//AppButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
Button {
width: 150
height: 50
background: Rectangle {
color: pressed ? "#ddd" : checked ? "black" : "#ccc"
border.color: "#aaa"
}
}
You can Try it Online!
I have two animations in my popup component, one runs when I open the popup and the other should run when I close it. Both animations work correctly, my current problem is that the animation runs after closing the popup, so it is not visible while the component is open.
Is there any way to close the popup only after running the animation?
Or a way to close the popup on click after a certain time?
Here is my popup component with the animations
import QtQuick 2.12
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Popup {
id: popup
width: 392
height: 768
parent: Overlay.overlay
modal: true
dim: true
closePolicy: Popup.NoAutoClose
x: Math.round((parent.width - popup.width))
y: Math.round((parent.height - popup.height) / 2)
Overlay.modal: Item {
id: overlay
width: popup.width
height: popup.height
Rectangle {
id: opacityBackground
anchors.fill: parent
color: "#000000"
opacity: 0
PropertyAnimation on opacity {
to: 0.4; duration: 3000;
}
}
}
background: Rectangle {
id: backgroundRectangle
implicitWidth: popup.width
implicitHeight: popup.height
color: "#0D0D0D"
}
Item {
id: content
anchors.fill: parent
Item {
id: header
width: popup.width - 4
height: 72
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: - 4
anchors.leftMargin: - 4
Item {
width: 105
height: 72
anchors.left: parent.left
anchors.top: parent.top
}
NbIconButton {
iconSource: "/icons/cancel.svg"
anchors.top: parent.top
anchors.right: parent.right
buttonColor: "#0D0D0D"
onClicked: {
slideOut.start()
popup.close()
}
}
}
Item {
id: descriptionContainer
width: 285
height: 88
anchors.top: parent.top
anchors.topMargin: 118
anchors.horizontalCenter: parent.horizontalCenter
}
Item {
id: tableContainer
anchors.top: contentTitle.bottom
anchors.topMargin: 24
}
}
onOpened: {
slideIn.start()
}
onClosed: {
slideOut.start()
}
ParallelAnimation {
id: slideIn
PropertyAnimation {
target: overlay
property: "opacity"
to: 0
duration: 3000
}
NumberAnimation {
target: popup
property: "x"
from: parent.width
to: 632
duration: 3000
easing.type: Easing.OutCubic
}
}
ParallelAnimation {
id: slideOut
PropertyAnimation {
target: opacityBackground
property: "opacity"
to: 0
duration: 3000
}
NumberAnimation {
target: popup
property: "x"
from: 632
to: parent.width
duration: 3000
easing.type: Easing.OutCubic
}
}
}
The following code results in this: Please consider only the pink box with blue border and blue box inside.
I want to arrange that blue Rectangle in the right side of the pink box. What's the way to achieve that? Why are the anchors failing?
https://doc.qt.io/qt-5/qml-qtquick-controls2-pane.html
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
Window
{
id: window; visible: true; width: 1000; height: 1000
Pane
{
id: pane
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
height: 50; width: 200
Layout.fillWidth: true
background:
Rectangle
{
id: rect
height: parent.height; width: parent.width
color: "pink";
border.color: "blue";
border.width: 2
}
RowLayout
{
width: parent.width; height: 50
Flickable
{
id: flickable
parent: rect
anchors.fill: parent
TextArea.flickable:
TextArea
{
id: messageField
text: "TextArea"
wrapMode: TextArea.Wrap
}
ScrollBar.vertical: ScrollBar { }
}
Rectangle
{
id: sendButton
parent: rect
anchors.right: rect.right; anchors.rightMargin: 2
anchors.top: rect.top; anchors.topMargin: 2
height: 20; width: 20
color: "blue"
}
}
}
}
This result is because of the rowlayout if you define blue rectangle outside the row layout it will assign to your anchor. rowlayout will override the alignment anchors.
I am using import QtQuick.Controls 1.4 as CC. Whenever I click on first column, the output I get is undefined whereas I am able to get the data of the rest of the columns.
That first column has a delegate.
What is the way to get data from the first column which has a delegate?
import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 1.4 as CC
import QtQuick.Controls.Styles 1.4
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
CC.TableView
{
height: 400; width: 600
style: TableViewStyle
{
headerDelegate: Rectangle
{
height: 20
color: "lightsteelblue"
Text
{
width: parent.width
text: styleData.value
}
}
rowDelegate: Rectangle
{
color: "blue"
height: 30
MouseArea
{
id: ma
anchors.fill: parent
onClicked:
{
console.log(styleData.value)
}
}
}
itemDelegate: Rectangle
{
color: "blue"
height: 30
Text
{
text: styleData.value
}
MouseArea
{
id: ma1
anchors.fill: parent
onClicked:
{
console.log(styleData.value)
}
}
}
}
CC.TableViewColumn
{
role: "aaa"
title: "AAA"
width: 100
delegate: Item
{
Rectangle
{
anchors.left: parent.left
id: pic
radius: 100
height: 15; width: 15; color: "red"
}
Text
{
anchors.left: pic.right
anchors.leftMargin: 10
text: styleData.value
}
}
}
CC.TableViewColumn
{
role: "bbb"
title: "BBB"
width: 100
}
CC.TableViewColumn
{
role: "ccc"
title: "CCC"
width: 100
}
model: ListModel
{
id: mymodel
ListElement
{
aaa : "Banana1"
bbb : "Apple1"
ccc : "zzz1"
}
ListElement
{
aaa : "Banana2"
bbb : "Apple2"
ccc : "zzz2"
}
}
}
}
For the old (edited) question:
You should use styleData.row instead of styleData.value in the console log lines
For the new question:
Your column has a delegate, which overrides the item delegate of the table. Then, when the first column is clicked, it is actually the delegate of the row which calls console log.
You can fix that by changing the column delegate to:
CC.TableViewColumn
{
role: "aaa"
title: "AAA"
width: 100
delegate: Item
{
Rectangle
{
anchors.left: parent.left
id: pic
radius: 100
height: 15; width: 15; color: "red"
}
Text
{
id: text_id
anchors.left: pic.right
anchors.leftMargin: 10
text: styleData.value
}
MouseArea
{
id: ma2
anchors.fill: parent
onClicked: {
console.log(text_id.text)
}
}
}
}
I am trying to add a dynamically instantiated QML component to a view as I need it to be added at a certain index and display at the top. The component is created correctly but when it is added to the model it does not display, how can this be solved? Here is my code:
main.qml:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 1920
height: 1080
visible: true
Timer{
interval: 700
repeat: true
running: true
property int counter : -1;
onTriggered: {
counter++;
var component;
var sprite;
var object;
component = Qt.createComponent("Recta.qml");
// sprite = component.createObject(project, {"x" : 100, "y" : -300, "name" : "Joshua" + counter});
object = component.createObject({"name" : "*****" + counter})
project.insert(0, object)
}
}
ListModel{
id: project
}
ListView{
id: lview
width: 310
height: 1080
}
}
recta.qml
import QtQuick 2.0
Item{
width: 300
height: 300
property string name;
Rectangle{
width: 300
height: 300
color: "teal"
Text{
anchors.centerIn: parent
text: name
}
}
}
Here is fixed main.qml code for you.
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
ApplicationWindow {
title: qsTr("Hello World")
width: 1920
height: 1080
visible: true
Timer{
interval: 700
repeat: true
running: true
property int counter : -1;
onTriggered: {
counter++;
project.insert(0, {"name":"*****" + counter});
}
}
ListModel{
id: project
}
ListView{
id: lview
width: 310
height: 1080
model: project
delegate: Recta {
name: model.name
}
}
}