Skip to content

QML and Qt Quick

Looking for The Bling Thing(tm)? Post here!
20.1k Topics 77.6k Posts
  • 0 Votes
    2 Posts
    245 Views
    dheerendraD
    This should work. Can you give complete example ? Also endRemoveRows().. is not a signal.
  • This topic is deleted!

    Unsolved
    2
    0 Votes
    2 Posts
    70 Views
  • Can't operate over reproducing local Video .mp4 saved locally.

    Unsolved
    2
    0 Votes
    2 Posts
    193 Views
    T
    Hello All, I fixed the main problem of this topic. My video was playing as Stream due to one configuration in NVR SDK communication, so it was being downloaded as Stream Type an no Quicktime. However, I'm facing a new problem: I have one component once it is clicked my video jump forward/backward for 5000ms. When I use this a lot of times, my video freeze and I can't reproduce again, only if I stop and play again. The same problem happened when I change the playbackRate variable from 1 to 2, to 4, to 8....
  • Hardware acceleration in Ubuntu 21.10

    Unsolved
    1
    0 Votes
    1 Posts
    455 Views
    No one has replied
  • Detect key presses when an input method is used

    Unsolved inputmethod textarea keys.onpressed
    1
    0 Votes
    1 Posts
    364 Views
    No one has replied
  • Buttons in SystemTrayIcon messages

    Unsolved
    1
    0 Votes
    1 Posts
    158 Views
    No one has replied
  • module "QtQuick.Dialogs" is not installed

    Solved
    4
    0 Votes
    4 Posts
    5k Views
    M
    Sorry for the late reply, In the example you provided the cause of the issue is that you have your actual QML code and it's import in a library instead of the app proper, this breaks qmake's import scanning. That's why there's an additional file in the actual app project (main) that does nothing but import all the modules that the library needs. Once you add "import QtQuick.Dialogs" in there the example will work. If the subproject were a proper QML module I think this ought to work out of the box but the way this project is set up this is the only feasible way. Also, you may want to remove the link to the source code since you may not be allowed to distribute the non-LGPL template parts of it. Hope this helps.
  • Hiding a rectangle with a transparent rectangle

    Unsolved
    3
    0 Votes
    3 Posts
    321 Views
    L
    As this is quite a simple shape, I would do something like this (might require some tweaking for your use-case): // main.qml Window { visible: true width: 640 height: 480 RectangleWithLabel { anchors.centerIn: parent width: 260 height: 120 borderColor: "blue" label.padding: 10 label.font.pointSize: 16 label.color: "teal" label.text: "My Label" // indent label box with x value label.x: 20 } } // RectangleWithLabel.qml import QtQuick 2.12 import QtQuick.Shapes 1.15 Shape { id: shape property alias borderWidth: shapePath.strokeWidth property alias borderColor: shapePath.strokeColor property alias label: label property int radius: 0 Component.onCompleted: { // prevent radius oversizing radius = Math.min(radius, label.height / 2) // prevent box beeing too narrow for label width = Math.max(width, label.width + label.x) // prevent box beeing too small for label height = Math.max(height, label.height) } ShapePath { id: shapePath strokeColor: "black" strokeWidth: 2 fillColor: "transparent" joinStyle: ShapePath.MiterJoin capStyle: ShapePath.RoundCap // begin on the 3 line intersection left to the label startX: label.x startY: label.height / 2 // line upwards to the top left corner of the label box PathLine { x: label.x y: 0 + shape.radius } // top left corner of label box PathArc { y: 0 relativeX: shape.radius radiusX: shape.radius radiusY: shape.radius } // upper horizontal line of the label box PathLine { x: label.width + label.x - shape.radius y: 0 } // top right corner of label box PathArc { y: shape.radius relativeX: shape.radius radiusX: shape.radius radiusY: shape.radius } // vertical right line of the label box PathLine { x: label.width + label.x y: label.height - shape.radius } // bottom right corner of label box PathArc { y: label.height relativeX: -shape.radius radiusX: shape.radius radiusY: shape.radius } // horizontal bottom line of label box PathLine { x: label.x + shape.radius y: label.height } // bottom left corner of label box PathArc { y: label.height - shape.radius relativeX: -shape.radius radiusX: shape.radius radiusY: shape.radius } // back to the starting point PathLine { x: label.x y: label.height / 2 } // go left for the upper horizontal line next to the label box PathLine { x: shape.radius y: label.height / 2 } // top left corner of main rectangle PathArc { direction: PathArc.Counterclockwise y: label.height / 2 + shape.radius relativeX: -shape.radius radiusX: shape.radius radiusY: shape.radius } // left outer vertical line of main rectangle PathLine { x: 0 y: shape.height - shape.radius } // bottom left corner of main rectangle PathArc { direction: PathArc.Counterclockwise y: shape.height relativeX: shape.radius radiusX: shape.radius radiusY: shape.radius } // bottom line of the main rectangle PathLine { x: shape.width - shape.radius y: shape.height } // bottom right corner of main rectangle PathArc { direction: PathArc.Counterclockwise y: shape.height - shape.radius relativeX: shape.radius radiusX: shape.radius radiusY: shape.radius } // right vertical line of main rectangle PathLine { x: shape.width y: label.height / 2 + shape.radius } // top right corner of main rectangle PathArc { direction: PathArc.Counterclockwise y: label.height / 2 relativeX: -shape.radius radiusX: shape.radius radiusY: shape.radius } // upper horizontal line, right to the label box PathLine { x: label.width + label.x y: label.height / 2 } } // the label text Text { id: label padding: 5 text: "" } }
  • Qml Singleton Wrapper for Q_Gadget Base-Type with static Q_INVOKABLE functions

    Unsolved
    2
    0 Votes
    2 Posts
    467 Views
    M
    Hi, I'm afraid exposing the Q_GADGET as a singleton directly just isn't an option. You may either expose it as an Q_PROPERTY of a QObject or write a wrapper QObject class that has the same Q_INVOKABLEs and then calls the version of the Q_GADGET class internally (this will obviously require adjustments if you decide to change or extend your Q_GADGET class itself). Hope one of these alternatives is viable for you.
  • QML Window span accross two screens

    Solved
    4
    0 Votes
    4 Posts
    374 Views
    T
    @lemons Thank you for response. Window { id: window visible: true minimumWidth: Screen.desktopAvailableWidth height: Screen.desktopAvailableHeight } Works for me. Only issue I have now, is that "Other" things use screen real estate, like in Ubuntu, the Dock on the side, you have to set it not to use the full height of the screen, only then the window manager, will place the QML Window at 0,0. Also the top bar, take some screen real estate, so the Screen.desktopAvailableHeight does not take that in account, and you have to tweak the window height to fit better. But thank you, you definitely put me on the right track.
  • QML for desktop: Jitter on window resize

    Unsolved
    1
    0 Votes
    1 Posts
    560 Views
    No one has replied
  • Creating two main.qml files, shared codebase

    Unsolved
    14
    0 Votes
    14 Posts
    866 Views
    SGaistS
    It's an environment variable. You have to set it. You can do it in Qt Creator in the Run part of the Project panel.
  • Add item to ListModel at run-time

    Unsolved
    4
    0 Votes
    4 Posts
    1k Views
    fcarneyF
    @qcoderpro said in Add item to ListModel at run-time: Can't assign to existing role 'triggered' of different type [VariantMap -> Function] It is seeing the ListElement "triggered" as something different than the append version of "triggered". So a work around is to add the initial elements via Component.onCompleted: import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Window 2.15 Window { width: 640 height: 480 visible: true title: qsTr("Hello World") Column { spacing: 10 Button { text: qsTr("Add Item") font.pixelSize: 15 onClicked: listMd.append({ name: txtField.text, triggered: function() { console.log(txtField.text) } }) } TextField { id: txtField } } Rectangle { id: root anchors.centerIn: parent width: 200; height: 150 color: "lightblue" ListModel { id: listMd /* ListElement { name: qsTr("One") triggered: function() { console.log("One") } } ListElement { name: qsTr("Two") triggered: function() { console.log("Two") } } */ Component.onCompleted: { listMd.append({ name: "One", triggered: function() { console.log("One") }}) listMd.append({ name: "Two", triggered: function() { console.log("Two") }}) } } Component { id: nameDelegate Text { text: model.name font.pixelSize: 32 MouseArea { anchors.fill: parent onClicked: model.triggered() } } } ListView { id: lsView anchors.fill: parent model: listMd delegate: nameDelegate clip: true focus: true } } } When clicking the text it does not run the function: qrc:/main.qml:62: TypeError: Property 'triggered' of object QQmlDMAbstractItemModelData(0x55ed97edb360) is not a function The conversion of the object in append is turning the function into an object of some type. I have seen ListModel convert other objects before when using append. So I don't think this approach will work this way. You could insert a string for the triggered property. Then use that string to lookup the function you want to call. You could store the function lookup object anywhere. The problem is now you have 2 lists. So maybe that isn't a good solution. (For the future, when posting minimal code, please check that it runs. There was stuff missing in the first post.)
  • Custom component with default content

    Unsolved
    5
    0 Votes
    5 Posts
    575 Views
    L
    @Tim-T yes you are right. this should work: Rectangle { id: root property alias content: root.children width: childrenRect.width height: childrenRect.height Component { id: defaultComponent Text { text: "My default text" } } Component.onCompleted: { if (root.children.length === 0) defaultComponent.createObject(root) } }
  • Customize Textfield

    Unsolved
    5
    0 Votes
    5 Posts
    707 Views
    L
    @NullByte you could do something like this: TextField { id: textField anchors.centerIn: parent focus: false width: 150 height: 40 text: "" color: "#2C2E35" // hide placeholder inside input as soon as it gets focus placeholderTextColor: textField.activeFocus ? "transparent" : "#AAAAAA" placeholderText: "Parola" leftPadding: 10 rightPadding: 10 topPadding: 5 bottomPadding: 5 background: Rectangle { color: "transparent" radius: 15 border.width: 2 border.color: textField.activeFocus ? "#80BBB6" : "#AAAAAA" // overlay for border line where label should go Rectangle { visible: textField.activeFocus // if background behind input is other than white, apply it here color: "white" anchors.top: parent.top anchors.left: parent.left // move it outside the rounded border anchors.leftMargin: parent.radius width: childrenRect.width height: parent.border.width // the actual label on the border Text { // add some spacings beside the label padding: 5 anchors.verticalCenter: parent.verticalCenter text: textField.placeholderText color: "#80BBB6" } } } cursorDelegate: Rectangle { visible: textField.cursorVisible color: "#80BBB6" width: textField.cursorRectangle.width } }
  • Using BLFS and Arch Linux Have Error qt.qpa.xcb: could not connect to display

    Unsolved
    9
    0 Votes
    9 Posts
    2k Views
    G
    Yes I logout and in the LXDM I choose "Plasma (X11)" then it hangs but the cursor of the mouse changing shape.
  • QSqlRelationalTableModel Example to Qml (TableView) with relation

    Solved
    2
    0 Votes
    2 Posts
    923 Views
    freaksddF
    I found a solution by my self. My solution ... : show in the relation field only a ComboBox (in future i will have a Lable to change the label by click to ComoBox) can read and write the value of the current filed So...at first i find out, that i used in the example above the Quick.Controls 1 .. so the old one. Now i update my Code to Quick.Controls 2. The only misstake i found is, i haven't read the api to the end. Why was the resulting Column empty? When you use realtions and one of the columnName of both tables are equal (in this example like 'name'), the filedName will change in the form of (e.g. tablename_columnname_id) QSqlRelationTableModel - Found under 'Detail Description' under 'Notes' When you debug the currentFieldNames u find the right name. In the example above the value use: city_name_3 When you use a read-only Component like Label, it looks like: Label { text: city_name_3 } When you want to use a read-write value in a comboBox, i found only the solution to write my one invokable funtion to get the relation-data: (this code is only for Test to get and write the Data .. it is not optimiesd for now) QSqlRealtionTableModel: [HEADER] ... Q_INVOKABLE QVariant getRelation(const QModelIndex &item, int role = Qt::EditRole); ... [CPP] QVariant LQSqlRelationalTableModel::getRelation(const QModelIndex &item, int role) { if (item.row() >= rowCount()) return QString(); QSqlRelation rela = relation(role); // is any realtion on this role? if(!rela.isValid()) return QString(); // get the table of the realtion QSqlTableModel *rModel = relationModel(role); QVariantList list; for(int i = 0; i < rModel->columnCount(); i++) { // look for the write headerName we need if(rModel->headerData(i, Qt::Orientation::Horizontal) == rela.displayColumn()) { for(int j = 0; j < rModel->rowCount(); j++) { // use the data-method for QSqlTableModel to get all values from the RealtionCoumn and save it in a List QModelIndex modelIndex = rModel->index(j, i); QVariant value = rModel->data(modelIndex); list.append(value); } break; } } return list; } When you use now this data for a model, you got a list of all the poibile relation-data: [QML] TableView{ model: relaModel delegate: DelegateChooser { // Qt.Quick.Controls 2 DelegateChoice { column: 0 delegate: Label { // it is also possible to use as spinbox, but by id you do not need realy text: id } } DelegateChoice { column: 1 delegate: Label { text: name } } DelegateChoice { column: 2 delegate: ComboBox { implicitWidth: 140 onActivated: { relaModel.setData(relaModel.index(row, column), currentText) } Component.onCompleted: { model = relaModel.getRelation(relaModel.index(row, column)) currentIndex = relaModel.hasRelation(relaModel.index(row, column), city_name_3) } } } DelegateChoice { column: 3 delegate: TextField { text: country_name_2 selectByMouse: true implicitWidth: 140 onAccepted: { // i don't know why the get a different row like '-1' - so i have to check it if (row >= 0) { var sendText = text relaModel.setData(relaModel.index(row, column), text) } } } } } } so know it comes the importend thing: in the comboBox the come the hole Data from the relationTable, so there text is the expected one. in the TextField of Column 3 (Country) can you write the text by hand. But the Text have to be exactly one of the realtionData's-ID. So you do not have the ID -> you have the value, the Data will not write in the Database. -> you will handle this in ::setData(...) Why does the cpp look so difficult and to much for some little thing? currently i found this solution cause you got only the realtion-data but you have to set the right id 5000 . Example: for the first Row you got for Espen the city-id: 5000 -> this is the realtion to city-name Oslo The Problem is, that you get in the ::data-function the realtion-Data ('Oslo') and not the id ('5000') When you wnat to set the data, you have to compare, if the data in the City-Table in Column Name. So you only handle the data with the realtion and not with the id. -> that make it immpossible, that you use unique-values in the column name of the table city Why? When you have two values with same name, the data will fetch only the first one. so it is possible that you got the wrong data So now my test looks like: [image: a3bb8cbd-a33f-44fa-8c63-b8ae890d5ac1.jpg] +++++++++++++++++++++++++ The next questions is, how to get the id (5000) instead of the realtion-Data (Oslo ) to handle columns with no unique-values. Any Idea? +++++++++++++++++++++++++ I know i use in this example a SpinBox for Id, but it is only a test to handle some Components with this QSqlRealtionTableModel. I'm realy sorry for my english, but i hope you understand all what i want to tell you. Greetings from Germany
  • Customizing PathView animation

    Unsolved
    6
    0 Votes
    6 Posts
    547 Views
    M
    @xinyangme sorry I don't understand your last question.
  • How to register a custom QML type in a visual studio project?

    Solved
    4
    0 Votes
    4 Posts
    682 Views
    ShenCS
    It works with the function qmlRegisterType. Literally appreciate your help @fcarney . It had bothered me quite a lot.
  • PathView Animation

    Unsolved
    2
    0 Votes
    2 Posts
    421 Views
    X
    Have you solved the current problem? I have the same problem but don't know how to fix it.