I am using QtQuick TableView to show data from a database through QSqlTableModel and QSortFilterProxyModel.
The remove row operation doesn't work as it should. I have implemented a method in a class derived from QSortFilterProxyModel to call removeRows methods of QSortFilterProxyModel.
Everything works correctly as long as I have a filter setted in QSortFilterProxyModel ( i set it through a text box ). But when the filter is empty, the TableView rowCount property doesn't decrement and, after each delete, the currentRow property is set to rowCount-2. Why? To me it looks like a bug. Why it works when the filter is not empty?
Q_INVOKABLE void eliminaCliente(int row) {
removeRows(row,1);
}
import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2
import Material 0.2
import Material.ListItems 0.1
ApplicationWindow {
id: root
visible: true
width: 1024
height: 640
title: qsTr("assiBase")
Page {
id: pLayout
anchors.fill: parent
ColumnLayout {
anchors.fill: parent
Toolbar {
id: aBar
Layout.fillWidth: true
page: pLayout
backgroundColor: "#eeeeee"
RowLayout {
anchors.fill: parent
ActionButton {
id: addButton
Layout.leftMargin: 10
iconName: "content/add_circle"
backgroundColor: "#4CAF50"
onClicked: modalDialog.show()
isMiniSize: true
}
ActionButton {
id: editButton
iconName: "content/create"
isMiniSize: true
}
ActionButton {
id: deleteButton
iconName: "action/delete"
isMiniSize: true
backgroundColor: "#FF0000"
onClicked: {
if (dataView.currentRow != -1) {
var r = dataView.currentRow
console.log(dataView.currentRow)
sqlSortedData.eliminaCliente(dataView.currentRow)
console.log(dataView.rowCount)
//dataView.currentRow = r
}
}
}
RowLayout {
Layout.alignment: Qt.AlignRight
Icon {
name: "action/search"
Layout.alignment: Qt.AlignBottom
}
TextField {
id: searchBox
Layout.rightMargin: 20
Layout.minimumWidth: 400
Layout.preferredWidth: 500
placeholderText: qsTr("cerca...")
onTextChanged: sqlSortedData.setFilterWildcard(searchBox.text)
font.capitalization: Font.MixedCase
}
}
}
}
TableView {
anchors.top: aBar.bottom
anchors.topMargin: 3
sortIndicatorVisible: true
frameVisible: false
Layout.fillWidth: true
Layout.fillHeight: true
onSortIndicatorColumnChanged: model.sort(sortIndicatorColumn, sortIndicatorOrder)
onSortIndicatorOrderChanged: model.sort(sortIndicatorColumn, sortIndicatorOrder)
id: dataView
TableViewColumn {
role: "ID"
visible: false
}
TableViewColumn {
role: "Nome"
title: "Nome"
width: 200
}
TableViewColumn {
role: "Residenza"
title: "Residenza"
width: 200
}
TableViewColumn {
role: "Assicurazione"
title: "Assicurazione"
width: 200
}
TableViewColumn {
width: 128
resizable: false
delegate: RowLayout {
anchors.fill: parent
clip: true
IconButton {
iconName: "content/create"
onClicked: console.log(styleData.row)
}
IconButton {
iconName: "action/delete"
onClicked: {
console.log(styleData.row)
sqlSortedData.eliminaCliente(styleData.row)
console.log(dataView.rowCount)
}
}
}
}
model: sqlSortedData
}
}
}
Take a look at here. There is an workaround suggestion.
It seems like QSortFilterProxyModel needs some love for a long time.
Related
We are having an ApplicationWindow based main.qml which is connected to our python backend via QmlElement Bridge. We have a view Slot-methods which directly return values to the qml frontend to change textfields which are children of the ApplicationWindow like the following:
ApplicationWindow {
id: mainFrame
width: 1280
height: 720
visible: true
title: qsTr("Test")
StackView {
id: stack
initialItem: loginFrame
anchors.fill: parent
}
Bridge {
id: bridge
}
Component{
id: loginFrame
ColumnLayout {
anchors.margins: 3
spacing: 3
Layout.columnSpan: 1
Layout.alignment: Qt.AlignHCenter
Text {
id: title
Layout.alignment: Qt.AlignHCenter
font.pointSize: 16
text: "Login Screen"
Layout.preferredHeight: 100
}
Button {
id: loginButton
Layout.alignment: Qt.AlignHCenter
text: "login"
highlighted: true
Material.accent: Material.Red
onClicked: {
title.text = bridge.login(username.text, password.text)
}
}
}
}
}
To reduce the size of our main.qml we decided to load the other Layouts, Components etc from different files with
Loader {
id: otherLoader
source: "other.qml"
}
How to access the Text Object inside of other.qml to update the text property from main.qml because the value is provided by the Bridge?
I already tried Accessing TextField from Another QML File but this hasn't worked.
The Loader creates items in not the same context as the statically create item use so cannot access the loaded item. You have several ways to access such an item.
The first and the most correct way is to use a declarative style:
Item {
id: container
anchors.fill: parent
property string someText: "press again"
Loader {
id: loader
active: false
sourceComponent: Text {
id: txt
text: container.someText
}
}
MouseArea {
anchors.fill: parent
onClicked: {
if(loader.active)
container.someText = "some text"
else
loader.active = true
}
}
}
You can create a binding in a Javascript code whenever you want:
Loader {
id: loader
active: false
sourceComponent: Text {
id: txt
Component.onCompleted: {
txt.text = Qt.binding(function() { return container.someText; })
}
}
}
Another option is using Loader.item property:
Item {
id: container
anchors.fill: parent
property string someText: "some text"
Loader {
id: loader
active: false
sourceComponent: Text {
id: txt
text: "press again"
}
}
MouseArea {
anchors.fill: parent
onClicked: {
if(loader.active)
loader.item.text = "some text"
else
loader.active = true
}
}
}
Is it possible to make mutual connection (without loop issue), using Connections, Binding or Qt.binding()?
It is possible to connect, say, SwipeView.currentIndex to TabBar.currentIndex and vise versa. When I page through SwipeView, then current tab of TabBar is also changed and vice versa. There is no binding loop of properties.
How to achieve this in Repeater? When some item created by Repeater became selected (in some sense), then I want to rebind its properties to another standalone item, which operates like editor of the selected item. The state of elements in selected item should depend on the state of items into the editor. But on selection changing I need to initialize items in editor using values from newly selected item.
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
id: root
property var currentDayOfWeek: { "enabled": false, "time": "08:00" }
visible: true
SystemPalette {
id: palette
}
RowLayout {
anchors.centerIn: parent
Column {
ButtonGroup { id: weekButtonGroup }
Repeater {
model: 7
RowLayout {
Settings {
id: dayOfWeekSettings
category: Qt.locale("C").standaloneDayName(index, Locale.LongFormat)
property bool enabled: false
property string time: "08:00"
}
Label {
text: dayOfWeekSettings.time
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle {
color: dayOfWeekSettings.enabled ? palette.highlight : palette.base
}
Layout.fillHeight: true
}
RadioButton {
text: Qt.locale().standaloneDayName(index, Locale.LongFormat)
onCheckedChanged: {
if (checked) {
root.currentDayOfWeek = dayOfWeekSettings
timeField.text = Qt.binding(function() { return dayOfWeekSettings.time }) // ???
enabledCheckBox.checked = Qt.binding(function() { return dayOfWeekSettings.enabled }) // ???
}
}
ButtonGroup.group: weekButtonGroup
Layout.fillHeight: true
}
}
}
Layout.fillHeight: true
}
Column {
// Editor
TextField {
id: timeField
text: currentDayOfWeek.time // ???
inputMask: "00:00;_"
inputMethodHints: Qt.ImhDigitsOnly
}
CheckBox {
id: enabledCheckBox
checked: currentDayOfWeek.enabled // ???
}
Layout.fillHeight: true
}
}
}
How to achieve this? Is there canonical way to do this? Above example is not the solution.
The following code works as I want:
import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
import Qt.labs.settings 1.0
ApplicationWindow {
id: root
//property var currentDayOfWeek: { "enabled": false, "time": "08:00" }
visible: true
SystemPalette {
id: palette
}
RowLayout {
anchors.centerIn: parent
Column {
ButtonGroup { id: weekButtonGroup }
Repeater {
model: 7
RowLayout {
Settings {
id: dayOfWeekSettings
category: Qt.locale("C").standaloneDayName(index, Locale.LongFormat)
property bool enabled: false
property string time: "08:00"
Binding on enabled {
when: dayOfWeekSettingsCheckBox.checked
value: enabledCheckBox.checked
}
Binding on time {
when: dayOfWeekSettingsCheckBox.checked
value: timeField.text
}
}
Label {
text: dayOfWeekSettings.time
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
background: Rectangle {
color: dayOfWeekSettings.enabled ? palette.highlight : palette.base
}
Layout.fillHeight: true
}
RadioButton {
id: dayOfWeekSettingsCheckBox
text: Qt.locale().standaloneDayName(index, Locale.LongFormat)
onCheckedChanged: {
if (checked) {
//root.currentDayOfWeek = dayOfWeekSettings
timeField.text = dayOfWeekSettings.time
enabledCheckBox.checked = dayOfWeekSettings.enabled
}
}
ButtonGroup.group: weekButtonGroup
Layout.fillHeight: true
}
}
}
Layout.fillHeight: true
}
Column {
id: editor
TextField {
id: timeField
//text: currentDayOfWeek.time
inputMask: "00:00;_"
inputMethodHints: Qt.ImhDigitsOnly
}
CheckBox {
id: enabledCheckBox
//checked: currentDayOfWeek.enabled
}
Layout.fillHeight: true
}
}
}
but there is an issue: editor filled with values in onCheckedChanged when checked became true. But what if when: in Bindings shoot first? Is it possible? Should I use delayed?
If I comment out:
timeField.text = dayOfWeekSettings.time
enabledCheckBox.checked = dayOfWeekSettings.enabled
and uncomment all the commented in above solution, then also all works fine. But the suspicion still persist.
I was trying to implement a tabbed Dialog in QML with the means to reset it to the intial values.
Since tabs are dynamically instantiated, none of the straight forward methods seem to work. The parent Dialog can not reference the inner Combobox and the Combobox can not reference the outer Dialog. How can this be achieved?
import QtQuick 2.3
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
Dialog {
id: dlg
title: "Settings"
visible: true
standardButtons: StandardButton.Apply | StandardButton.Reset
property string val: ""
onApply: console.log(val)
onReset: {
// RESET COMBOBOX TO DEFAULT
}
TabView {
id: tabView
anchors.fill: parent
Tab {
title: "ValueTab"
id: tabVal
GridLayout {
id: gridVal
anchors.fill: parent
GroupBox {
title: qsTr("Choose value")
id: gb
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
id: cl
ComboBox {
id: valueChooser
editable: false
model: ListModel {
id: listModel
ListElement { text: "One" }
ListElement { text: "Two" }
ListElement { text: "Three" }
}
Layout.fillWidth: true
onCurrentTextChanged : val = currentText
}
}
}
}
}
}
}
I am quite unsure, if I got your question right as you say, you can not reference the Dialog from within the Combobox. I can not see the reason why.
Assuming the example of yours contains indeed your problem and all you want to do is to reset the values (and you know the original values) once the reset button is pressed, this is how I would solve it.
Using the Connections-type to connect to the Dialog's reset() from within the Combobox
import QtQuick 2.3
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
Dialog {
id: dlg
title: "Settings"
visible: true
standardButtons: StandardButton.Apply | StandardButton.Reset
property string val: ""
onApply: console.log(val)
onReset: {
// **DONT** RESET COMBOBOX TO DEFAULT **HERE**
}
TabView {
id: tabView
anchors.fill: parent
Tab {
title: "ValueTab"
id: tabVal
GridLayout {
id: gridVal
anchors.fill: parent
GroupBox {
title: qsTr("Choose value")
id: gb
Layout.fillWidth: true
ColumnLayout {
anchors.fill: parent
id: cl
ComboBox {
id: valueChooser
editable: false
model: ListModel {
id: listModel
ListElement { text: "One" }
ListElement { text: "Two" }
ListElement { text: "Three" }
}
Layout.fillWidth: true
onCurrentTextChanged : val = currentText
/// *** INTERESTING PART HERE! ***
Connections {
target: dlg
onReset: {
// RESET COMBOBOX TO DEFAULT **HERE** INSTEAD
valueChooser.currentIndex = 0
}
}
}
}
}
}
}
}
}
I am working on an android application and I am facing a problem. In a page of the application I have some input fields, one of them is for date and I wanted to add a Calendar that open on demand for selecting the date or just enter the date manually, for this, I created a custom component which is composed of a TextInput and a button which when clicked will create the calendar item with a loader and set the size of the loader to 80 (it was 0 initially) all this components are included in a columnlayout. When the button get clicked the calendar is drawn below the other input fields.
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
FocusScope {
id: root
Layout.preferredHeight: 20
property alias text: input.text
property alias border: background.border
property alias backgroundColor: background.color
property alias textColor: input.color
ColumnLayout{
anchors.fill: parent
spacing: 1
RowLayout{
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
id: background
Layout.fillHeight: true
Layout.fillWidth: true
color: "darkgrey"
TextInput {
id: input
anchors.fill: parent
anchors.margins: 3
verticalAlignment: TextInput.AlignVCenter
focus: true
text: dateInput.selectedDate
}
}
CustomButton {
id: calandar
Layout.fillHeight: true
Layout.preferredWidth: 40
image: "icons/CalandarButton.svg"
onClicked: {
console.log("clicked calandar")
if(calendarLoader.status === Loader.Null){
calendarLoader.height = 80
calendarLoader.sourceComponent = Qt.createQmlObject("import QtQuick 2.5; import QtQuick.Controls 1.4; Calendar {}",
calendarLoader,
"calandarpp")
}
else{
calendarLoader.height = 0
calendarLoader.sourceComponent = undefined
}
}
}
}
Loader {
id: calendarLoader
Layout.fillWidth: true
height: 0
}
}
}
If something is below, then try changing its z coordinate.
There is no need to do Qt.createQmlObject() ever. It's enough to toggle Loader.active or Item.visible.
Example is not reproducible, make sure that it runs by itself with qmlscene.
This works for me:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
FocusScope {
id: root
Layout.preferredHeight: 20
property alias text: input.text
property alias border: background.border
property alias backgroundColor: background.color
property alias textColor: input.color
z: 1
Loader {
id: calendarLoader
active: false
sourceComponent: Calendar {}
z: 1
}
ColumnLayout {
anchors.fill: parent
spacing: 1
RowLayout{
Layout.fillHeight: true
Layout.fillWidth: true
Rectangle {
id: background
Layout.fillHeight: true
Layout.fillWidth: true
color: "darkgrey"
TextInput {
id: input
anchors.fill: parent
anchors.margins: 3
verticalAlignment: TextInput.AlignVCenter
focus: true
}
}
Button {
id: calandar
Layout.fillHeight: true
Layout.preferredWidth: 40
onClicked: {
console.log("clicked calandar")
calendarLoader.active = !calendarLoader.active
}
}
}
}
}
In QML, I have a Tab containing a TextField and a Button. How do I ensure the Button has focus when the tab is selected, instead of the TextField? Setting "focus:" to true and false, respectively, does not do it. In the code below, the goal is for btnRefresh to have focus when a tab is selected, instead of txtName.
main.qml:
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2 // For TabViewStyle
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
TabView {
id: tabView
anchors.fill: parent
anchors.margins: 20
tabPosition: Qt.BottomEdge
Tab {title: "Tab 1"; source: "mytab.qml"}
Tab {title: "Tab 2"; source: "mytab.qml"}
style: TabViewStyle {
frameOverlap: 1
tab: Rectangle {
color: styleData.selected ? "steelblue" :"lightsteelblue"
border.color: "steelblue"
implicitWidth: Math.max(text.width + 4, 80)
implicitHeight: 20
radius: 2
Text {
id: text
anchors.centerIn: parent
text: styleData.title
color: styleData.selected ? "white" : "black"
}
}
frame: Rectangle { color: "steelblue" }
}
}
}
mytab.qml:
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
Rectangle {
anchors.fill: parent
GridLayout {
columns: 2
anchors.fill: parent
rowSpacing: 10
RowLayout {
Layout.columnSpan: 2
Label {
id: lblName
text: "Name:"
}
TextField {
id: txtName;
text: "a name"
Layout.preferredWidth: lblName.implicitWidth * 1.5;
focus: false
}
}
TextArea {
id: textSetup
text: "Text Area"
Layout.columnSpan: 2
Layout.fillWidth: true
Layout.fillHeight: true
}
Button {
id: btnRefresh
Layout.columnSpan: 2
Layout.alignment: Qt.AlignHCenter
text: qsTr("Refresh")
focus: true
}
}
}
Whenever you switch tabs in a TabView, a signal handler onVisibleChanged is called on the two tabs (one that disappeared and the one that appeared) since the visibility of these tabs has changed. You can try adding following code to your Tabs:
Tab {
id: tab1
title: "Tab 1"; source: "mytab.qml"
onVisibleChanged: {
if (visible) tab1.item.funcSetFocusOnButton();
}
}
Please note the way a function is called on a tab using item.
Now in "mytab.qml", you create a javascript function funcSetFocusOnButton which sets focus on your button. So your mytab.qml will have this additional code:
Rectangle {
//Your GridLayout{}
funcSetFocusOnButton() {
btnRefresh.forceActiveFocus();
}
}
Note here that the function funcSetFocusOnButton should be a direct child of your base item (rectangle here). Hope this helps!