TableView not the correct size with QML - qt

I am trying to create a TableView with QML where I have a checkbox, an image and a text field. The table column definitions are as follows:
// TableViewCheckBoxColumn.qml
TableViewColumn {
title: ""
role: "check"
delegate: CheckBox {
anchors.fill: parent
checked: styleData.value
}
}
//TableViewImageColumn.qml
TableViewColumn {
title: ""
role: "thumbnail"
delegate: Image {
anchors.fill: parent
source: styleData.value
width: 30
height: 30
}
}
Now the data model and the table itself is defined as a QML component as follows:
Item {
ListModel {
id: sourceModel
ListElement {
check: false
thumbnail: "file:///Users/xargon/alignment.png"
length: "10:22"
}
}
// Table view
TableView {
anchors.centerIn: parent
alternatingRowColors: false
TableViewCheckBoxColumn {
id: checkedColumn
}
TableViewImageColumn {
id: thumbColumn
}
TableViewColumn {
id: lengthColumn
role: "length"
title: "Length"
}
model: sourceModel
}
}
Now, this is embedded in a ColumnLayout and a StackView as:
ColumnLayout {
anchors.fill: parent
MyTable {
id: reviewScreen
Layout.fillWidth: true
}
StackView {
id: options
Layout.fillHeight: true
Layout.fillWidth: true
initialItem: reviewScreen
}
}
Now I was expecting the table to fill the entire width of the parent control and I also was expecting the image to be drawn as a 30 x 30 image but what I see is the attached screenshot where the horizontal scrollbar is there to move between controls and the table is small and the image is very distorted as well.

yes, only you need declare heigh and weight of every TableViewColumn, for example:
TableViewColumn { id: lengthColumn; role: "length"; title: "Length"; height: parent.height/8; width:parent.width*0.25}

Related

Update Text inside loaded qml file

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
}
}
}

QML TableView Custom delegate: How to make ellipsis for too long text

I want to display a QFileSystemModel in a QML TreeView and need a custom delegate, as I want to add a check box next to a file. This is what I have:
TreeView {
id: view
anchors.fill: parent
sortIndicatorVisible: true
model: fileSystemModel
rootIndex: rootPathIndex
selection: sel
selectionMode: 2
TableViewColumn {
id: namecolumn
title: "Name"
role: "fileName"
resizable: true
width: parent.width-sizeWidth-dateWidth-scrollBarWidth
delegate: fileCheckDelegate
}
Component {
id: fileCheckDelegate
Row{CheckBox{}
Text{text: root.getText(model.fileName)}
}
}
However, I have a problem with long filenames going over the column border. The default delegate truncates the text and adds ellipsis to the truncated text. I would like to do the same in my custom delegate, but don't know how this should be done.
As you can see, I tried with a custom getText function, but I don't know which widths and positions to use there for deciding whether a text should be truncated or not
Edit: I found that setting Text.ElideRight on my Text component would do the ellipsis, but I need to set an explicit width. How can I set the width of my Text component right then?
Ok, this does the trick:
TreeView {
id: view
anchors.fill: parent
sortIndicatorVisible: true
model: fileSystemModel
rootIndex: rootPathIndex
selection: sel
selectionMode: 2
TableViewColumn {
id: namecolumn
title: "Name"
role: "fileName"
resizable: true
width: parent.width-sizeWidth-dateWidth-scrollBarWidth
delegate: fileCheckDelegate
}
Component {
id: fileCheckDelegate
Row{CheckBox{
id: cbox
}
Text{text: model.fileName
width: namecolumn.width-x-cbox.width
elide: Text.ElideRight
}
}
}

Drag and Drop in QML TreeView

In QML i have a TreeView with (properly working) multiselection:
TreeView {
id: treeview
anchors.fill: parent
model: myTestModel
selectionMode: SelectionMode.ExtendedSelection
selection: ItemSelectionModel {
model: treeview.model
}
TableViewColumn {
role: "name_role"
title: "Name"
width: 160
}
TableViewColumn {
role: "type_role"
title: "Type"
width: 75
}
}
I'd like to implement drag & drop to be able to "pull" items out of the treeview into a DropArea.
But when I use the approach I found several times, namely defining an itemDelegate that contains a MouseArea, the selection doesn't work anymore.
TreeView {
id: treeview
anchors.fill: parent
model: myTestModel
// broken due to MouseArea in itemDelegate !
selectionMode: SelectionMode.ExtendedSelection
selection: ItemSelectionModel {
model: treeview.model
}
TableViewColumn {
role: "name_role"
title: "Name"
width: 160
}
TableViewColumn {
role: "type_role"
title: "Type"
width: 75
}
itemDelegate: Item {
Rectangle {
id: rect
anchors.fill: parent
color: styleData.selected ? "blue" : "transparent"
Text {
anchors.verticalCenter: parent.verticalCenter
color: styleData.selected ? "white" : "black"
text: styleData.value
}
MouseArea {
anchors.fill: parent
drag.target: symbolAvatar
onPressed: {
var tmp = mapToItem(container, mouse.x, mouse.y);
symbolAvatar.x = tmp.x;
symbolAvatar.y = tmp.y;
symbolAvatar.dragging = true;
symbolAvatar.text = styleData.value;
}
}
}
}
}
where symbolAvatar is an item that becomes visible when a drag has started.
Any ideas how to implement drag and drop in a QML TreeView without breaking the selection?
Edit: Using the onPressAndHold event handler inside the TreeView would be a solution if I could access the mouse position there, but it doesn't seem to exist :-(

QtQuick TableView delete row doesn't work

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.

Menu / sidebar with interactive buttons inside item

A picture is worth thousand words. This is menu / sidebar which I want to get:
Note that it is fake. This is just static QTreeWidget preparation with 3 columns, colspan and header hidden.
Nedded features:
Grayed upper case items should not be possible to select (partly could be solved by QTreeWidgetItem::setFlags(ItemIsSelectable))
Icons on the right side (open, eject) should be interactive. I mean click signal and cursor should change to "hand" when mouse is over these icons
When resizing menu / sidebar using QSplitter then icons on the right side should anchor to the right edge
I'm beginner in Qt Framework but not such lame. I studied examples to find interesting solutions but I'm not sure which will be the easiest:
Play with QGraphicsView
Create QToolButton descendant and try to add child buttons. Then put everything into QWidget, add labels, layout and prepare stylesheet to imitate QTreeWidget
Create QTreeWidget descendant and play with painter, mouse move event etc.
Any suggestions or other solutions? Never tried QML / QtQuick, had no time to learn it but maybe I could use QDeclarativeView or QQuickWidget
Use Drawers and Listview in conjunction to get your results. QML Drawers are the slidable widgets which you can program to open() on a click or a press event.
Here is the official write up on QML Drawer
https://doc-snapshots.qt.io/qt5-5.7/qml-qtquick-controls2-drawer.html
The following example from Qt runs exactly what is mentioned in the question.
http://doc.qt.io/qt-5/qtquickcontrols2-gallery-example.html
Taken straight from the code just to give you an Idea :
import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
import Qt.labs.settings 1.0
ApplicationWindow {
id: window
width: 360
height: 520
visible: true
title: "Qt Quick Controls 2"
Settings {
id: settings
property string style: "Default"
}
header: ToolBar {
Material.foreground: "white"
RowLayout {
spacing: 20
anchors.fill: parent
ToolButton {
contentItem: Image {
fillMode: Image.Pad
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
source: "qrc:/images/drawer.png"
}
onClicked: drawer.open()
}
Label {
id: titleLabel
text: "Gallery"
font.pixelSize: 20
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
ToolButton {
contentItem: Image {
fillMode: Image.Pad
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
source: "qrc:/images/menu.png"
}
onClicked: optionsMenu.open()
Menu {
id: optionsMenu
x: parent.width - width
transformOrigin: Menu.TopRight
MenuItem {
text: "Settings"
onTriggered: settingsPopup.open()
}
MenuItem {
text: "About"
onTriggered: aboutDialog.open()
}
}
}
}
}
Drawer {
id: drawer
width: Math.min(window.width, window.height) / 3 * 2
height: window.height
ListView {
id: listView
currentIndex: -1
anchors.fill: parent
delegate: ItemDelegate {
width: parent.width
text: model.title
highlighted: ListView.isCurrentItem
onClicked: {
if (listView.currentIndex != index) {
listView.currentIndex = index
titleLabel.text = model.title
stackView.replace(model.source)
}
drawer.close()
}
}
model: ListModel {
ListElement { title: "BusyIndicator"; source: "qrc:/pages/BusyIndicatorPage.qml" }
ListElement { title: "Button"; source: "qrc:/pages/ButtonPage.qml" }
ListElement { title: "CheckBox"; source: "qrc:/pages/CheckBoxPage.qml" }
ListElement { title: "ComboBox"; source: "qrc:/pages/ComboBoxPage.qml" }
ListElement { title: "Dial"; source: "qrc:/pages/DialPage.qml" }
ListElement { title: "Delegates"; source: "qrc:/pages/DelegatePage.qml" }
ListElement { title: "Drawer"; source: "qrc:/pages/DrawerPage.qml" }
ListElement { title: "Frame"; source: "qrc:/pages/FramePage.qml" }
ListElement { title: "GroupBox"; source: "qrc:/pages/GroupBoxPage.qml" }
ListElement { title: "Menu"; source: "qrc:/pages/MenuPage.qml" }
ListElement { title: "PageIndicator"; source: "qrc:/pages/PageIndicatorPage.qml" }
ListElement { title: "Popup"; source: "qrc:/pages/PopupPage.qml" }
ListElement { title: "ProgressBar"; source: "qrc:/pages/ProgressBarPage.qml" }
ListElement { title: "RadioButton"; source: "qrc:/pages/RadioButtonPage.qml" }
ListElement { title: "RangeSlider"; source: "qrc:/pages/RangeSliderPage.qml" }
ListElement { title: "ScrollBar"; source: "qrc:/pages/ScrollBarPage.qml" }
ListElement { title: "ScrollIndicator"; source: "qrc:/pages/ScrollIndicatorPage.qml" }
ListElement { title: "Slider"; source: "qrc:/pages/SliderPage.qml" }
ListElement { title: "SpinBox"; source: "qrc:/pages/SpinBoxPage.qml" }
ListElement { title: "StackView"; source: "qrc:/pages/StackViewPage.qml" }
ListElement { title: "SwipeView"; source: "qrc:/pages/SwipeViewPage.qml" }
ListElement { title: "Switch"; source: "qrc:/pages/SwitchPage.qml" }
ListElement { title: "TabBar"; source: "qrc:/pages/TabBarPage.qml" }
ListElement { title: "TextArea"; source: "qrc:/pages/TextAreaPage.qml" }
ListElement { title: "TextField"; source: "qrc:/pages/TextFieldPage.qml" }
ListElement { title: "ToolTip"; source: "qrc:/pages/ToolTipPage.qml" }
ListElement { title: "Tumbler"; source: "qrc:/pages/TumblerPage.qml" }
}
ScrollIndicator.vertical: ScrollIndicator { }
}
}
ToolButton with drawer.png as Image, is programmed to open and close the sidebar.
I hope this helps.
if you decide to go QML (which I would recommend, unless you have specific reasons not to) here's what you could do.
Step one: Use a ListView with section headers: http://qmlbook.github.io/en/ch06/index.html#lists-with-sections
Step two: Create an item delegate with multiple actions / subitems.
Just take a look at the Qml docs and examples or the QML Book linked above to understand the basics of the model, ListView and delegate concepts:
http://qmlbook.github.io/en/ch06/index.html#
As to anchoring, you can do that pretty easily too by using the anchors property and the many layout options QML gives you:
http://qmlbook.github.io/en/ch04/index.html#positioning-elements
Hope this helps.

Resources