I need to add a component at a particular position in stack layout and I am not getting how to insert, following is the code.
import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Component{
id:comp
Rectangle{
id:rect
anchors.fill:parent
}
}
StackLayout
{
id:stack
anchors.fill:parent
currentIndex:index //spin box will update this property
}
Button
{
id:insert
onClicked:
{
var res = comp.createObject(stack) // Should insert a rect at a position not at the end
}
}
Got the answer and also may be duplicate of:
https://stackoverflow.com/a/43225476/6336374
I used insert(index,item) of ObjectModel
Thanks to #derM it helped a lot.
Related
I have a QList<QObject*> that is read from within a ListView module into a model. At first the QList is an empty object. I want the indexBackup to be updated when I assign a new list to the QList object.
import QtQuick 2.5
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.2
import QtQuick.Controls.Styles 1.0
ListView {
id: layersListView
model: settingsList //QList<QObject*> object
int indexBackup: 0
onModelChanged: {
if(indexBackup && indexBackup < model.length)
{
indexBackup = model.length
}
else
{
indexBackup = - 1
}
}
}
For everybody with similar problem, the answer can be found here.
I am trying to make a varaibles file in qml which declares several strings to be used by other qml files. for example: this would be Variables.qml
import QtQuick 2.0
Item {
property var mystring: qsTr("hello world")
}
and I want to reference it in another file tab1.ui.qml
import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import "."
Item {
Rectangle {
id: rectangle
color: "#3e1edd"
anchors.fill: parent
Text {
id: text6
anchors.fill: parent
font.pixelSize: 12
text: Variables.mystring
visible: true
}
}
}
this gives an error: Unable to assign [undefined] to QString
please tell me if there is a better way to manage variables. I want them to be global so they can be used in multiple frames. Thanks
You must use a singleton, for it you must create a folder that contains the .qml with "pragma Singleton" at the top and a qmldir that indicate the files:
Global
├── qmldir
└── Variables.qml
qmldir
singleton Variables 1.0 Variables.qml
Variables.qml
pragma Singleton
import QtQuick 2.0
QtObject {
property var mystring1: qsTr("hello world1")
property var mystring2: qsTr("hello world2")
}
Then you must import and use it in the following way:
// others imports
import "Global"
// ...
Text{
// ...
text: Variables.mystring1
}
In this link you will find an example.
I am trying to figure out how to properly set focus in my application.
I have a component MyItem.qml, which I want to change its background when any of its children gets focus. I also have a MyDerivedItem.qml that derives from MyItem.qml that also should change the background of the base class if any of its children gets focus.
If I understood the documentation correctly, if a component gets focus the focus property of all its parents in the hierarchy are set to true (or until a FocusScope component is reached).
If this is true, then when I press any of the TextFields in MyItem.qml or MyDerivedItem.qml the myItem.focus property should change to true and the background change its color.
I have tried to make a small example of what I want to do, but it does not behave as I expect.
//main.qml
import QtQuick.Controls 2.0
ApplicationWindow {
height: 768
width: 1024
visible: true
MyDerivedItem {
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
width: parent.width / 2
}
MyDerivedItem {
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width / 2
}
}
//MyItem.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
Rectangle {
id: myItem
default property alias data: column.data
color: focus ? "red" : "green"
Column {
id: column
TextField {
placeholderText: "Input Text Here"
}
}
}
//MyDerivedItem.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
MyItem {
id: myDerivedItem
TextField {
placeholderText: "Derived Input Text Here"
}
TextField {
placeholderText: "Derived Input Text Here"
}
TextField {
placeholderText: "Derived Input Text Here"
}
TextField {
placeholderText: "Derived Input Text Here"
}
//...
}
This is somewhat doumented here. Accoding to that the propagation is: Qt -> QQuickWindow -> Item-with-focus.
There is no traversal of the object tree, but the focusing rather happens directly.
There is one exception to this rule, that is the FocusScope which acts as the focused Item towards the scene or a FocusScope in a higher hirarchy.
So basically you can say, in addition to the object-tree, there is a second focus-tree where each node is a FocusScope and all other Items are leaves.
Each FocusScope-Node might have one child that has focus.
Children of an Item in the object-tree might be siblings to their object-parents in the focus-tree.
The solution to my problem was a minor change. Adding FocusScope to MyItem.qml as follows:
//MyItem.qml
import QtQuick 2.7
import QtQuick.Controls 2.0
FocusScope {
id: focusScope
default property alias data: column.data
Rectangle {
id: myItem
anchors.fill: parent
color: focusScope.focus ? "red" : "green"
Column {
id: column
anchors.fill: parent
TextField {
placeholderText: "Input Text Here"
}
}
}
}
I want to make an area, where a small rectangles appear in the places it where clicked. Later on I would try to add an ability to move those rectangles by dragging.
After studying Help, I tried to accomplish this with a MouseArea and a Component containing a Rectangle. Then, with onClicked, I was trying to create a new copy of a Component, but I failed whatever I tried (createComponent, createObject, etc.).
What is the correct way of creating a copy of an object in this case?
Am I using right tools for this goal?
MouseArea {
Component {
id: rect
Rectangle {
width: 10
height: 10
}
}
onClicked: < what? >
}
you can create a QML object from a string of QML using the Qt.createQmlObject() and set it's x and y values to mouseX and mouseY :
import QtQuick 2.3
import QtQuick.Window 2.0
Window {
id : root
visible: true
width: 1000
height: 500
MouseArea {
anchors.fill: parent
onClicked:{
var newObject = Qt.createQmlObject('import QtQuick 2.3; Rectangle {color: "red"; width: 10; height: 10}',
root);
newObject.x = mouseX;
newObject.y = mouseY;
}
}
}
Also if you put the code for your rectangle in a separate qml file say myRect.qml, you can create the object from the qml file by :
onClicked:{
var component = Qt.createComponent("myRect.qml");
var newObject = component.createObject(root, {"x": mouseX, "y": mouseY});
}
I want to add controls at runtime, e.g. a certain number of TextField items added to a GridLayout.
I've tried to use Repeater like in the code below (some code skipped for brevity).
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Rectangle {
width: 400
height: 400
GridLayout {
id : gridmain
Repeater {
id:gridgenerate
TextField{
id:leditfill
font.pointSize: 10
placeholderText: index +1
focus: true;
}
}
}
}
The Repeater is populated via a JS function:
function gameview() {
console.log("grid")
gridmain.rows = 10
gridmain.columns = 10
gridgenerate.model = gridmain.rows * gridmain.columns
gridgenerate.forceActiveFocus()
}
Is this the correct approach? How do I get focus on first TextField of the Gridlayout?
Almost done. Remove gridgenerate.forceActiveFocus() and set TextField focus property to true if it's the first item: index == 0.
GridLayout {
id : gridmain
Repeater {
id:gridgenerate
TextField{
id:leditfill
font.pointSize: 10
placeholderText: index +1
focus: index == 0 // only first item get focus
}
}
its' a good aproach.
you can do it dinamicaly (like a gridView)
function gameview() {
console.log("grid")
gridgenerate.model = 0 //destroy all items created by repeater
gridmain.rows = 10
gridmain.columns = 10
gridgenerate.model = buttonModel.count //add new items, using ListModel
}
ListModel {
id:buttonModel
ListElement {
color: "red"
cols:2
rows:2
name: "B1"
}
}
Repeater {
id:gridgenerate
property var listobjects:[]
Rectangle{
id:button
color :buttonModel.get(index).color
}
}