I have a QSqlQueryModel and a TableView to display the data from the model. The code and output data results are fine. But, I just want to display an image in front of each row in the TableView. However, with my current QML code, the image is repeated along with the elements in my table columns. I have added example screenshots for reference
Current Output (Screenshot)
What I want
My Code is as below
Test.qml
import QtQuick 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
Page {
id : somepageid
TableView{
id: testTable
model: QueryModel
height: 500
width: 400
delegate:
Row{
Image {
id: statusImg
height: 18
width: 18
source: "../../../Images/icons/tick.png"
}
Text {
text: display
}
}
}
}
QueryModel.cpp
#include "querymodel.h"
QueryModel::QueryModel(QObject *parent): QSqlQueryModel(parent)
{
}
void QueryModel::setQuery(const QString &query, const QSqlDatabase &db)
{
QSqlQueryModel::setQuery(query, db);
generateRoleNames();
}
void QueryModel::setQuery(const QSqlQuery &query)
{
QSqlQueryModel::setQuery(query);
generateRoleNames();
}
QVariant QueryModel::data(const QModelIndex &index, int role) const
{
QVariant value;
if(role < Qt::UserRole) {
value = QSqlQueryModel::data(index, role);
}
else {
int columnIdx = role - Qt::UserRole - 1;
QModelIndex modelIndex = this->index(index.row(), columnIdx);
value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);
}
return value;
}
QHash<int, QByteArray> QueryModel::roleNames() const
{
return {{Qt::DisplayRole, "display"}};
}
void QueryModel::callSql()
{
QSqlDatabase dbMysql = QSqlDatabase::database();
this->setQuery(this->tmpSql(), dbMysql);
}
QString QueryModel::tmpSql() const
{
return m_tmpSql;
}
void QueryModel::setTmpSql(QString tmpSql)
{
if (m_tmpSql == tmpSql)
return;
m_tmpSql = tmpSql;
emit tmpSqlChanged(m_tmpSql);
}
void QueryModel::generateRoleNames()
{
m_roleNames.clear();
for( int i = 0; i < record().count(); i ++) {
m_roleNames.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8());
}
}
A possible solution is to use a Loader:
// ...
delegate: Row{
Loader{
active: model.column === 0
sourceComponent: Image {
id: statusImg
height: 18
width: 18
source: "../../../Images/icons/tick.png"
}
}
Text {
text: model.display
}
}
// ...
Related
There's a model (currently it's derived from QAbstractItemModel, but it can also be any model that provides named data roles) from which I need to get data, knowing a row/column and a role name. I can get index by row and column:
const index = mYModel.index(row, column);
I can also get data by index and role:
const data = myModel.data(index, role);
I haven't found any way to somehow find out the role by its name. Am I missing something or is this impossible at all?
Here's the pseudocode:
// MyModel.h
class MyModel: public QAbstractItemModel
{
public:
QHash<int, QByteArray> roleNames() const override
{
QHash<int, QByteArray> roleNames;
roleNames[Qt::UserRole + 1] = "someRole";
return roleNames;
}
};
// Item.qml
Item {
ListView {
model: myModel
delegate: myDelegate
}
Button {
onClicked: {
const rowIndex = Math.random(myModel.count);
// here I need to get data for item at
// row rowIndex, column 0 and role name "someRole"
}
}
}
Since your model is used in a ListView, I would use the itemAtIndex function of that ListView:
ListView {
id: theList
model: myModel
delegate: UnknownItem {
property var theModel: model //have to add this property
}
}
Button {
onClicked: {
let item = theList.itemAtIndex(theList.currentIndex)
if(item) {
console.log("clicked", item.theModel.title)
}
}
}
Note that this works with integer index, not on the QModelIndex you have in your question.
I don't see any built-in features to do that. So the easiest solution for me is to create a helper class that will retrieve the necessary data from the given model.
Helper class:
class ModelHelper : public QObject
{
Q_OBJECT
Q_PROPERTY(QVariant model READ model WRITE setModel)
public:
explicit ModelHelper(QObject *parent = nullptr)
: QObject(parent)
{}
QVariant model() const
{
return m_model;
}
void setModel(const QVariant &model)
{
m_model = model;
}
Q_INVOKABLE QVariant data(int row, const QString &roleName) const
{
if (const QAbstractItemModel *model = m_model.value<QAbstractItemModel*>()) {
const QHash<int, QByteArray> roleNames = model->roleNames();
for (auto i = roleNames.cbegin(); i != roleNames.cend(); ++i) {
if (i.value() == roleName) {
return model->data(model->index(row, 0), i.key());
}
}
}
return QVariant();
}
private:
QVariant m_model;
};
//...
qmlRegisterType<ModelHelper>("Test.ModelUtils", 1, 0, "ModelHelper");
How to use:qml
import Test.ModelUtils 1.0
//...
ListModel {
id: listModel
ListElement { name: "John" }
ListElement { name: "Mike" }
}
ModelHelper {
id: modelHelper
model: listModel
}
Button {
text: "Print Data"
onClicked: {
const data = [];
for (let i = 0; i < listModel.count; ++i) {
data.push(modelHelper.data(i, "name"));
}
console.log(data);
}
}
I have an QAbstractListModel object that maintains a list of items to show on a map. The position of these items changes every few seconds and it is easy to calculate a pretty accurate position 60 seconds in the future. What I am trying to do is to set the item's position when it gets a new position (that part works well) and then to immediately move the item toward the calculated future position.
The code without animation looks like this and it works fine:
Component {
id: drawTarget
MapQuickItem {
id: marker
coordinate: data.coords
sourceItem: Item {
id: item
...
The data object has a property which returns the estimated position of the item 60 seconds in the future, so I tried this:
Component {
id: drawTarget
MapQuickItem {
id: marker
coordinate: data.coords
CoordinateAnimation {
id:anim
property: "coordinate"
}
onCoordinateChanged: {
anim.stop()
anim.from = data.coords
anim.to = data.coordsIn60sec
anim.duration = 60000
anim.start()
}
sourceItem: Item {
id: item
...
But although the object's position is updated properly at each position update, the animation toward the future estimated position doesn't work at all.
How would one go about doing something like this?
In its code, it makes a binding coordinate: data.coords that states that "coordinate" takes the value of "coords" but at the same time says that "coordinate" depends on the animation, isn't it contradictory? Well, it is contradictory.
The idea is not to do the binding coordinate: data.coords but to update the property only through the animation.
The following code is a workable example:
main.qml
import QtQuick 2.14
import QtQuick.Window 2.14
import QtLocation 5.6
import QtPositioning 5.6
Window {
visible: true
width: 640
height: 480
Plugin {
id: mapPlugin
name: "osm"
}
Map {
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.91, 10.75) // Oslo
zoomLevel: 10
MapItemView{
model: datamodel
delegate: MapQuickItem{
id: item
// begin configuration
property var position: model.position
property var nextposition: model.nextposition
onPositionChanged: restart();
onNextpositionChanged: restart();
function restart(){
anim.stop()
anim.from = position
anim.to = nextposition
anim.start()
}
CoordinateAnimation {
id: anim
target: item
duration: 60 * 1000
property: "coordinate"
}
// end of configuration
anchorPoint.x: rect.width/2
anchorPoint.y: rect.height/2
sourceItem: Rectangle{
id: rect
color: "green"
width: 10
height: 10
}
}
}
}
}
datamodel.h
#ifndef DATAMODEL_H
#define DATAMODEL_H
#include <QAbstractListModel>
#include <QGeoCoordinate>
#include <QTimer>
#include <random>
#include <QDebug>
struct Data{
QGeoCoordinate position;
QGeoCoordinate nextposition;
};
static QGeoCoordinate osloposition(59.91, 10.75); // Oslo;
class DataModel : public QAbstractListModel
{
Q_OBJECT
QList<Data> m_datas;
public:
enum PositionRoles {
PositionRole = Qt::UserRole + 1,
NextPositionRole
};
explicit DataModel(QObject *parent = nullptr)
: QAbstractListModel(parent)
{
init();
}
int rowCount(const QModelIndex &parent = QModelIndex()) const override{
return parent.isValid() ? 0: m_datas.count();
}
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override{
if (!index.isValid() || index.row() < 0 || index.row() >= m_datas.count())
return QVariant();
const Data &data = m_datas[index.row()];
if (role == PositionRole)
return QVariant::fromValue(data.position);
else if (role == NextPositionRole)
return QVariant::fromValue(data.nextposition);
return QVariant();
}
QHash<int, QByteArray> roleNames() const override{
QHash<int, QByteArray> roles;
roles[PositionRole] = "position";
roles[NextPositionRole] = "nextposition";
return roles;
}
private:
void init(){
for(int i=0; i< 10; ++i){
Data data;
data.position = osloposition;;
data.nextposition = data.position;
m_datas << data;
}
QTimer *timer = new QTimer(this);
QObject::connect(timer, &QTimer::timeout, this, &DataModel::updateData);
timer->start(60 * 1000);
updateData();
}
void updateData(){
qDebug() << __PRETTY_FUNCTION__;
static std::default_random_engine e;
static std::uniform_real_distribution<> dis(-.1, .1);
for(int i=0; i < m_datas.count(); ++i){
Data & data = m_datas[i];
QModelIndex ix = index(i);
data.position = data.nextposition;
data.nextposition = QGeoCoordinate(osloposition.latitude() + dis(e),
osloposition.longitude() + dis(e));
Q_EMIT dataChanged(ix, ix, {PositionRole, NextPositionRole});
}
}
};
#endif // DATAMODEL_H
In the following link is the complete example
I need to implement a TimeEdit(HH:MM:SS) field in QML similar to QTimeEdit in QT C++. In QML I didn't find TimeEdit and I have implemented the control similar to TimeEdit using TextField and if I add inputMask then the Regular expression is not at all validated, Is there any way that I can achieve this? Following is the code.
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Time Edit")
TextField{
id:textEditTD
text : ""
inputMethodHints: Qt.ImhDigitsOnly
inputMask: "dd:dd:dd; "
validator: RegExpValidator { regExp: /^([0-1]?[0-9]|2[0-3]):([0-5][0-9]):[0-5][0-9]$ / }
width:100
height:50
background:Rectangle{
color:"transparent"
border.color: "red"
border.width:2
radius:(width * 0.05)
}
}
}
I use the following combination of "round-down" QValidator-derived custom validator of time input (it is simple to add seconds filed):
#pragma once
#include <QTime>
#include <QValidator>
// almost equiv to RegExpValidator { regExp: /(([01][0-9])|(2[0-3])):([0-5][0-9])/ }
class TimeValidator
: public QValidator
{
Q_OBJECT
public :
explicit TimeValidator(QObject * const parent = Q_NULLPTR)
: QValidator{parent}
{ ; }
virtual
State validate(QString & input, int & pos) const Q_DECL_OVERRIDE
{
Q_UNUSED(pos);
const auto parts = input.splitRef(':');
if (parts.length() != 2) {
input = QStringLiteral("00:00");
} else {
const int hours = qBound(0, parts.first().toInt(), 23);
const int minutes = qBound(0, parts.last().toInt(), 59);
const QTime time{hours, minutes};
Q_ASSERT(time.isValid());
input = time.toString("hh:mm");
}
return Acceptable;
}
};
template< typename T >
int qmlRegisterClass(int versionMajor = 1, int versionMinor = 0)
{
const auto className = T::staticMetaObject.className();
return ::qmlRegisterType< T >(className, versionMajor, versionMinor, className);
}
// ...
qmlRegisterClass< TimeValidator >();
And TextFiled with inputMask:
import TimeValidator 1.0
TextField {
id: timePicker
verticalAlignment: TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignHCenter
text: "00:00"
inputMask: "00:00;_"
validator: TimeValidator {}
inputMethodHints: Qt.ImhDigitsOnly
// placeholderText: "00:00" // for implicitWidth
// Layout.minimumWidth: implicitWidth
// Layout.fillWidth: true
}
I found two ways to implement this :
1) I made changes to Orient answer to meet my requirement and following is the change which works when backspace is pressed:
virtual
State validate(QString & input, int & pos) const Q_DECL_OVERRIDE
{
const QStringList parts = input.split(":");
if (parts.length() != 3) {
input = QStringLiteral("00:00:00");
}
else
{
int hours = 0;
int minutes = 0;
int seconds = 0;
//hours
if(parts[0].toInt() > 23){
hours = 23;
pos +=1; //Increment the position
}
else{
QString str = parts[0];
if(str.contains(" ")){
str.replace(" ","0");
}
hours = str.toInt();
}
// Minutes
if(parts[1].toInt() > 59){
minutes = 59;
pos +=1; //Increment the position
}
else{
QString str = parts[1];
if(str.contains(" ")){
str.replace(" ","0");
}
minutes = str.toInt();
}
//Seconds
if(parts[2].toInt() > 59){
seconds = 59;
pos +=1; //Increment the position
}
else{
QString str = parts[2];
if(str.contains(" ")){
str.replace(" ","0");
}
seconds = str.toInt();
}
const QTime time{hours, minutes,seconds};
Q_ASSERT(time.isValid());
input = time.toString("hh:mm:ss");
}
return Acceptable;
}
2) By just changing the inputMask and RegExp which is very easy:
inputMask: "99:99:99"
validator: RegExpValidator { regExp: /^([0-1\s]?[0-9\s]|2[0-3\s]):([0-5\s][0-9\s]):([0-5\s][0-9\s])$ / }
I have QML TableView with QSqlQueryModel. I need to select any row and get data from every column of table to separate TextField.
Here is abonentstable.h:
#pragma once
#include <QObject>
#include <QSqlQueryModel>
class AbonentsSqlModel : public QSqlQueryModel
{
Q_OBJECT
public:
explicit AbonentsSqlModel(QObject *parent = 0);
void setQuery(const QString &query, const QSqlDatabase &db = QSqlDatabase());
QVariant data(const QModelIndex &index, int role) const;
QHash<int, QByteArray> roleNames() const { return m_roleNames; }
private:
void generateRoleNames();
QHash<int, QByteArray> m_roleNames;
};
abonentstable.cpp:
#include "abonentstable.h"
#include <QSqlRecord>
#include <QSqlField>
AbonentsSqlModel::AbonentsSqlModel(QObject *parent) : QSqlQueryModel(parent)
{
QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE");
db.setDatabaseName("data_base.sqlite");
db.open();
}
void AbonentsSqlModel::setQuery(const QString &query, const QSqlDatabase &db)
{
QSqlQueryModel::setQuery(query, db);
generateRoleNames();
}
void AbonentsSqlModel::generateRoleNames()
{
m_roleNames.clear();
for( int i = 0; i < record().count(); i ++) {
m_roleNames.insert(Qt::UserRole + i + 1, record().fieldName(i).toUtf8());
}
}
QVariant AbonentsSqlModel::data(const QModelIndex &index, int role) const
{
QVariant value;
if(role < Qt::UserRole) {
value = QSqlQueryModel::data(index, role);
}
else {
int columnIdx = role - Qt::UserRole - 1;
QModelIndex modelIndex = this->index(index.row(), columnIdx);
value = QSqlQueryModel::data(modelIndex, Qt::DisplayRole);
}
return value;
}
Table.qml:
TableView {
id: table
model: abonents
....
TableViewColumn {
delegate: Text {
text: " " + model.name + " " + model.surname
font.pointSize: 20
}
width: 575
}
TableViewColumn {
delegate: Text {
text: " " + model.phone
font.pointSize: 20
}
width: 575
}
TableViewColumn {
delegate: Text {
text: " " + model.ip_address
font.pointSize: 20
}
width: 525
}
}
And some text fields:
TextField {
id: leftText
}
TextField {
id: centerText
}
TextField {
id: rightText
}
This sqlite table has 4 columns, and I need to get data from selected row to those text fields: 2 columns to left, 1 to center and 1 to right.
When the user clicks a valid row it is emitted the clicked(int row) signal. Then, you can get the values for that row, format the text depending on your requirements and set the values in the three TextField. For example, in your case:
TableView {
id: table
model: abonents
... (your TableViewColumn components) ...
onClicked: {
leftText.text = abonents.get(row).name + " " + libraryModel.get(row).surname;
centerText.text = abonents.get(row).phone;
rightText.text = abonents.get(row).ip_address;
}
}
Please, let me please use my own answer to show you a complete example:
import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
ApplicationWindow {
id: window
visible: true
title: "Table View Example"
TableView {
y: 70
width: 500
TableViewColumn {
role: "title"
title: "Title"
width: 100
}
TableViewColumn {
role: "author"
title: "Author"
width: 100
}
TableViewColumn{
width: 300
delegate: Text {
text: model.title + " " + model.author
font.family: "Courier New"
font.pixelSize: 18
color: "red"
}
}
onClicked: {
leftText.text = libraryModel.get(row).title + " " + libraryModel.get(row).author;
centerText.text = libraryModel.get(row).title;
rightText.text = libraryModel.get(row).author;
}
model: libraryModel
ListModel {
id: libraryModel
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
}
}
TextField {
id: leftText
}
TextField {
id: centerText
anchors.left: leftText.right
}
TextField {
id: rightText
anchors.left: centerText.right
}
}
I have a custom model which derives from QAbstractListModel which is exposed to QML. I need to support operations to add new items and remove existing items. While insertion operation works without any problems, removal operation causes the application to crash while calling endRemoveRows() function.
void GPageModel::addNewPage()
{
if(m_pageList.count()<9)
{
beginInsertRows(QModelIndex(),rowCount(),rowCount());
GPage * page = new GPage();
QQmlEngine::setObjectOwnership(page,QQmlEngine::CppOwnership);
page->setParent(this);
page->setNumber(m_pageList.count());
page->setName("Page " + QString::number(m_pageList.count()+1));
m_pageList.append(page);
endInsertRows();
}
}
void GPageModel::removePage(const int index)
{
if(index>=0 && index<m_pageList.count())
{
beginRemoveRows(QModelIndex(),index,index);
qDebug()<<QString("beginRemoveRows(QModelIndex(),%1,%1)").arg(index);
GPage * page = m_pageList.at(index);
m_pageList.removeAt(index);
delete page;
endRemoveRows();
}
}
The class GPage derives from QObject. I am struck trying to figure out what is causing the app to crash while trying to call endRemoveRows(). I get "ASSERT failure in QList::at: "index out of range"" when endRemoveRows() is called.How do I remove the rows from a QAbstracListModel? Is there any other way?
I am using Qt 5.1.0 on a Windows 7 64 bit machine.
The code below works fine for me. Your problem is probably elsewhere. This is for Qt 5 due to use of Qt Quick Controls.
There are two views accessing the same model, this visually confirms that the model emits proper signals to inform the views of the changes. The page additions and removals are done via the standard insertRows and removeRows methods, exported through Q_INVOKABLE. There's no need for any custom methods on this model, so far. The Q_INVOKABLE is a workaround for some missing functionality for the interface between QML and QAbstractItemModel.
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow>
#include <QAbstractListModel>
#include <QQmlContext>
#include <QtQml>
class GPage : public QObject {
Q_OBJECT
Q_PROPERTY(QString name NOTIFY nameChanged MEMBER m_name)
Q_PROPERTY(int number NOTIFY numberChanged MEMBER m_number)
QString m_name;
int m_number;
public:
GPage(QObject * parent = 0) : QObject(parent), m_number(0) {}
GPage(QString name, int number, QObject * parent = 0) :
QObject(parent), m_name(name), m_number(number) {}
Q_SIGNAL void nameChanged(const QString &);
Q_SIGNAL void numberChanged(int);
};
class PageModel : public QAbstractListModel {
Q_OBJECT
QList<GPage*> m_pageList;
public:
PageModel(QObject * parent = 0) : QAbstractListModel(parent) {}
~PageModel() { qDeleteAll(m_pageList); }
int rowCount(const QModelIndex &) const Q_DECL_OVERRIDE {
return m_pageList.count();
}
QVariant data(const QModelIndex &index, int role) const Q_DECL_OVERRIDE {
if (role == Qt::DisplayRole || role == Qt::EditRole) {
return QVariant::fromValue<QObject*>(m_pageList.at(index.row()));
}
return QVariant();
}
bool setData(const QModelIndex &index, const QVariant &value, int role) Q_DECL_OVERRIDE {
Q_UNUSED(role);
GPage* page = value.value<GPage*>();
if (!page) return false;
if (page == m_pageList.at(index.row())) return true;
delete m_pageList.at(index.row());
m_pageList[index.row()] = page;
QVector<int> roles;
roles << role;
emit dataChanged(index, index, roles);
return true;
}
Q_INVOKABLE bool insertRows(int row, int count, const QModelIndex &parent = QModelIndex()) Q_DECL_OVERRIDE {
Q_UNUSED(parent);
beginInsertRows(QModelIndex(), row, row + count - 1);
for (int i = row; i < row + count; ++ i) {
QString const name = QString("Page %1").arg(i + 1);
GPage * page = new GPage(name, i + 1, this);
m_pageList.insert(i, page);
QQmlEngine::setObjectOwnership(page, QQmlEngine::CppOwnership);
}
endInsertRows();
return true;
}
Q_INVOKABLE bool removeRows(int row, int count, const QModelIndex &parent = QModelIndex()) Q_DECL_OVERRIDE {
Q_UNUSED(parent);
beginRemoveRows(QModelIndex(), row, row + count - 1);
while (count--) delete m_pageList.takeAt(row);
endRemoveRows();
return true;
}
};
int main(int argc, char *argv[])
{
PageModel model1;
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
model1.insertRows(0, 1);
engine.rootContext()->setContextProperty("model1", &model1);
qmlRegisterType<GPage>();
engine.load(QUrl("qrc:/main.qml"));
QObject *topLevel = engine.rootObjects().value(0);
QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
window->show();
return app.exec();
}
#include "main.moc"
main.qml
import QtQuick 2.0
import QtQml.Models 2.1
import QtQuick.Controls 1.0
ApplicationWindow {
width: 300; height: 300
Row {
width: parent.width
anchors.top: parent.top
anchors.bottom: column.top
Component {
id: commonDelegate
Rectangle {
width: view.width
implicitHeight: editor.implicitHeight + 10
color: "transparent"
border.color: "red"
border.width: 2
radius: 5
TextInput {
id: editor
anchors.margins: 1.5 * parent.border.width
anchors.fill: parent
text: edit.name // "edit" role of the model, to break the binding loop
onTextChanged: {
display.name = text;
model.display = display
}
}
}
}
ListView {
id: view
width: parent.width / 2
height: parent.height
model: DelegateModel {
id: delegateModel1
model: model1
delegate: commonDelegate
}
spacing: 2
}
ListView {
width: parent.width / 2
height: parent.height
model: DelegateModel {
model: model1
delegate: commonDelegate
}
spacing: 2
}
}
Column {
id: column;
anchors.bottom: parent.bottom
Row {
Button {
text: "Add Page";
onClicked: model1.insertRows(delegateModel1.count, 1)
}
Button {
text: "Remove Page";
onClicked: model1.removeRows(pageNo.value - 1, 1)
}
SpinBox {
id: pageNo
minimumValue: 1
maximumValue: delegateModel1.count;
}
}
}
}
main.qrc
<RCC>
<qresource prefix="/">
<file>main.qml</file>
</qresource>
</RCC>