QML / QT: TableView Vertical ScrollBar (mouse works but touch does not on scrollbar) - qml

A one file, simple example is below that showcases my concern. TableView flick area works as expected with mouse and touch. It's the scrollbar that seems to not function properly. Mouse allows you to click and drag the scrollbar handle and to click in the scrollbar background and the content area responds. However, if you try to press in the scrollbar background or grab the scrollbar handle with touch...no response. Why? Suggestions on how to fix?
Thanks,
-Rich
import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 1.4
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
Window {
width: 641
height: 480
visible: true
title: qsTr("Hello World")
Rectangle {
width: 640
height: 200
anchors.fill: parent
TableView {
id: tv
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
TableViewColumn {
role: "title"
title: "Title"
width: 100
}
TableViewColumn {
role: "author"
title: "Author"
width: 200
}
model: libraryModel1
style: TableViewStyle {
decrementControl: Rectangle {
width: 0
visible: false
}
incrementControl: Rectangle {
width: 0
visible: false
}
scrollToClickedPosition: true
handle: Rectangle {
visible: true
implicitWidth: 10
radius: width/2
color: "#2EA2EC"
}
scrollBarBackground: Rectangle {
visible: true
width: 10
radius: width/2
color: "#DBDDDD"
}
}
ListModel {
id: libraryModel1
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
ListElement {
title: "A Masterpiece"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
}
}
}
}

Related

TableView is overlapping TabBar

I have this inside of my main.qml:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Imagine
ApplicationWindow {
visible: true
width: Screen.width
height: Screen.height
title: "Portmod"
TabBar {
id: bar
width: parent.width
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
StackLayout {
width: parent.width
height: parent.height
currentIndex: bar.currentIndex
TableView {
id: manageTab
columnSpacing: 1
rowSpacing: 1
clip: true
model: installed_pkgs_model
selectionModel: ItemSelectionModel {}
delegate: Rectangle {
implicitWidth: 300
implicitHeight: 50
color: selected ? "blue" : "lightgray"
required property bool selected
Text {
text: display
}
}
}
Item {
id: searchTab
}
}
}
It's displaying my TableView and TabBar with two TabButtons fine, but the TableView is overlapping with the TabBar and I have to drag the TableView out of the way to see it.
I'd like the TableView to be moved down so the TabBar is always visible, but I'm not sure how to do this. The layout system is a bit confusing to me.
A simple way would be to move the TabBar into a header:
header: TabBar {
id: bar
width: parent.width
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
Using layouts, you could do it like this:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Imagine
import Qt.labs.qmlmodels 1.0
ApplicationWindow {
width: Screen.width
height: Screen.height
title: "Portmod"
visible: true
ColumnLayout {
anchors.fill: parent
spacing: 0
TabBar {
id: bar
Layout.fillWidth: true
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
StackLayout {
currentIndex: bar.currentIndex
Layout.fillWidth: true
Layout.fillHeight: true
TableView {
id: manageTab
columnSpacing: 1
rowSpacing: 1
clip: true
model: TableModel {
TableModelColumn { display: "name" }
TableModelColumn { display: "color" }
rows: [
{
"name": "cat",
"color": "black"
},
{
"name": "dog",
"color": "brown"
},
{
"name": "bird",
"color": "white"
}
]
}
selectionModel: ItemSelectionModel {}
delegate: Rectangle {
implicitWidth: 300
implicitHeight: 50
color: selected ? "blue" : "lightgray"
required property bool selected
required property string display
Text {
text: display
}
}
}
Item {
id: searchTab
}
}
}
}

flickableItem.atYEnd is always false when scrolling QML

I have a ListView which is inside a ScrollView and I want to know or listen when the scroll bar is scrolled to the bottom,
ScrollView {
id: moderatorMessagesScrollViewID
anchors.fill: parent
function update()
{
console.debug("<< moderatorMessagesScrollViewID ScrollView::update ", flickableItem.atYEnd);
}
flickableItem.onAtYBeginningChanged: {
update();
}
flickableItem.onAtYEndChanged: {
update();
}
flickableItem.onContentYChanged: {
update();
}
ListView {
id: moderatorMessagesList
anchors.leftMargin: 15
anchors.rightMargin: 15
anchors.bottomMargin: 5
layoutDirection: Qt.LeftToRight
orientation: ListView.Vertical
verticalLayoutDirection: ListView.BottomToTop
cacheBuffer: (chatPanel.height <= 0) ? 1000 : (chatPanel.height * 1000)
spacing: 0
focus: true
Component.onCompleted: {
updateView();
}
delegate: messageListDelegate
}
style: ScrollViewStyle {
incrementControl: Rectangle {
visible: false
implicitWidth: 0
implicitHeight: 0
}
decrementControl: Rectangle {
visible: false
implicitWidth: 0
implicitHeight: 0
}
corner: Rectangle {
color: "white"
visible: true
rotation: 180
}
handle: Rectangle {
implicitWidth: 5 * MyStyle.props.scrollSizeFactor()
implicitHeight: 7 * MyStyle.props.scrollSizeFactor()
color: Qt.rgba(237/255, 237/255, 237/255, 1)
radius: 2
border.width: 1
border.color: "#C3C3C3"
}
scrollToClickedPosition: true
handleOverlap: 1
scrollBarBackground: Rectangle {
width: 5 * MyStyle.props.scrollSizeFactor()
height: 10 * MyStyle.props.scrollSizeFactor()
color: MyStyle.props.color("chatChatPanelBackground")
}
transientScrollBars: false
}
}
but my issues here are
flickableItem.atYEnd is always false
flickableItem.onAtYEndChanged is not triggered even if I scroll at the bottom
update() is triggered by onContentYChanged() instead when i try to scroll using scrollbar.
What is wrong with this and what areas I need to look into?
Here's a minimum working example depicting the detection of Vertical scroll bar at its bottom:
ListModel {
id: contactModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
Rectangle {
width: 180; height: 50
Component {
id: contactDelegate
Item {
width: 180; height: 40
Column {
Text { text: '<b>Name:</b> ' + name }
Text { text: '<b>Number:</b> ' + number }
}
}
}
}
ScrollView {
width: 200
height: 60
ListView {
model: contactModel
delegate: contactDelegate
onAtYEndChanged: console.log("Vertical Scroll Bar's bottom reached = ", atYEnd)
}
}

QML ListView delegate with Component Row does't render correctly

And now I have a problem with my qml script. here's the simple code:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: root
anchors.fill: parent
color: "green"
SystemPalette { id: activePalette }
ColumnLayout {
id: rightPanel
Layout.fillHeight: true
Layout.fillWidth: true
Layout.rightMargin: 10
anchors.fill: parent
Component.onCompleted: {
console.log(this, width, parent, parent.width)
}
ListView {
spacing: 2
Layout.fillHeight: true
Layout.fillWidth: true
model: ListModel {
ListElement {
name: "nihao"
value: "1"
}
ListElement {
name: "fds"
value: "2"
}
ListElement {
name: "fdssd"
value: "4"
}
}
delegate: Component {
// Rectangle {
// color: "yellow"
// height: 40
// width: parent.width
Row {
anchors.fill: parent
spacing: 2
height: 40
width: 200
Rectangle {
color: activePalette.window
height: 25
width: 100
border.color: "white"
border.width: 3
Text {
anchors.centerIn: parent
text: name
}
}
Rectangle {
color: activePalette.window
height: 25
width: 100
border.color: "white"
border.width: 3
Text {
anchors.centerIn: parent
text: value
}
}
}
//}
}
}
}
}
}
The code does't display correctly when I use qmlscene to render it, it even render nothing if the ListModel is too long.
But, if I uncomment out the "Rectangle" code in delegate component, it works well. So I'm comfused with the difference between Reactangle and Row for that they are all inherited from Item. And what should be placed into the delegate component as its direct child?

How to fill a QTableview using QML Tool Button

I need to press my create button under red circle and by pressing this button i am trying to fill first row of my table view. I am a new user in QT Quick please help me. I have wasted lot of time but have no way to do it.
I am providing UI and code as well please have a look.
Thank you !
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.0
import "content"
import "images"
ApplicationWindow {
visible: true
title: "Mask Editor: Subsystem"
width: 720
height: 420
minimumHeight: 400
minimumWidth: 720
statusBar: StatusBar {
id: minstatusbar
RowLayout {
id:row1
spacing: 2
width: parent.width
Button {
text:"Unmask"
}
Item { Layout.fillWidth: true }
Button {
text:"OK"
}
Button {
text:"Cancel"
}
Button {
text:"Help"
}
Button {
text:"Apply"
}
}
}
/* ListModel {
id: largeModel
Component.onCompleted: {
for (var i=0 ; i< 10 ; ++i)
largeModel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
}
}*/
Action {
id: openAction
text: "&Open"
shortcut: "Ctrl+O"
iconSource: "images/document-open.png"
onTriggered: fileDialog.open()
tooltip: "Open an Image"
}
TabView {
id:frame
enabled: enabledCheck.checked
tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
anchors.fill: parent
anchors.margins: Qt.platform.os === "osx" ? 12 : 2
Tab {
id: controlPage
title: "Parameters"
Item {
id:root
anchors.fill: parent
anchors.margins: 8
ColumnLayout {
id: mainLayout
anchors.fill: parent
spacing: 4
GroupBox {
id: gridBox
title: "Grid layout"
Layout.fillWidth: true
ListModel {
id: nestedModel
ListElement{index:"1";prompt:"pmt";variable:10; type: "to be defined";tabname:"something"}
}
GridLayout {
id: gridLayout
anchors.fill: parent
rows: 3
flow: GridLayout.TopToBottom
ToolButton { iconSource: "images/window-new.png"
action:filldata
Accessible.name: "New window"
onClicked: {
nestedmodel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
}
tooltip: "Toggle visibility of the second window" }
ToolButton { iconSource: "images/view-refresh.png"
onClicked: window1.visible = !window1.visible
Accessible.name: "New window"
tooltip: "Toggle visibility of the second window" }
ToolButton { Accessible.name: "Save as"
iconSource: "images/document-save-as#2x.png"
tooltip: "(Pretend to) Save as..." }
TableView{
model: modelcontl
Layout.rowSpan: 3
Layout.fillHeight: true
Layout.fillWidth: true
//anchors.fill: parent
TableViewColumn {
role: "index"
title: "#"
width: 36
resizable: false
movable: false
}
TableViewColumn {
role: "prompt"
title: "Prompt"
width: 120
}
TableViewColumn {
role: "variable"
title: "Variable"
width: 120
}
TableViewColumn {
role: "type"
title: "Type"
width: 200
visible: true
}
TableViewColumn {
role: "tabname"
title: "Tab Name"
Layout.fillWidth: true
visible: true
}
}
}
}
Rectangle{
Layout.fillHeight: true
Layout.fillWidth: true
GridLayout {
//id: gridLayout
rows: 1
flow: GridLayout.TopToBottom
anchors.fill: parent
GridLayout{
id: grid1
columns: 2
anchors.fill: parent
GroupBox {
//id: gridBox
title: "Grid layout"
Layout.fillHeight: true
Layout.fillWidth: true
}
GroupBox {
//id: gridBox
title: "Grid layout"
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
}
}
}
}
Tab {
title: "Documentation"
Controls { }
}
Tab {
title: "dialog"
MessageDialogs { }
}
}
}
If you want to add a QML control into a cell you just have to define custom delegate. Since you need different delegates for different columns it can be done in a bit "tricky" way with Loader. See my example below:
Component {
id: comboDelegate
ComboBox {
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
}
}
Component {
id: textDelegate
Text {
text: itemText
}
}
TableView {
Layout.fillWidth: true
Layout.fillHeight: true
TableViewColumn{ role: "col1" ; title: "Column1" }
TableViewColumn{ role: "col2" ; title: "Column2" }
TableViewColumn{ role: "col3" ; title: "Column3" }
model: ListModel {
id: myModel
}
itemDelegate: Item {
height: 25
Loader {
property string itemText: styleData.value
sourceComponent: styleData.column === 0 ? comboDelegate : textDelegate
}
}
}
Try this:
TableView {
TableViewColumn{ role: "col1" ; title: "Column1" }
TableViewColumn{ role: "col2" ; title: "Column2" }
TableViewColumn{ role: "col3" ; title: "Column3" }
model: ListModel {
id: myModel
}
}
Button {
text: "Add row"
onClicked: {
myModel.append({col1: "some value",
col2: "Another value",
col3 : "One more value" });
}
}

Is it possible to set a Pathview element in QML to stop when it reaches last element in the model?

Pathview rotate to the first element when it reaches end, how to stop it when it reaches the end?
Thanks
import QtQuick 1.0
Rectangle {
id: rectangle1
width: 360
height: 360
color: "grey"
opacity: 1
ListModel {
id: listModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
Component {
id: delegate
Text {
id: nameText
width: 64; height: 20
wrapMode: Text.Wrap
text: name
}
}
Rectangle {
y:parent.height/2
width: parent.width
height: parent.height/2
ListView {
width: parent.width
height: parent.height
model: listModel
focus: true
delegate: Text {
id: item
text: name + ": " + number
}
preferredHighlightBegin: 20
preferredHighlightEnd: 40
highlightRangeMode: ListView.StrictlyEnforceRange
highlight: Rectangle { color: "lightblue"; radius: 5 }
}
}
}
This effect can be achieved by ListView, with the properties setting.