PDA

View Full Version : Flickable area not working



jfinn88
23rd September 2016, 17:44
I'm trying to implement a flickable area on my table view for touch screen scrolling... but it doesn't seem to work



Rectangle {
width: 990
height: 490
anchors.centerIn: parent
color: "transparent"
radius: 4
border.color: "lightsteelblue"
border.width: 5
visible: true
//---Create a flickable area---//
Flickable {
id: tableViewFlickable
height: tableView.height
width: tableView.width
contentHeight: tableView.height
contentWidth: tableView.width
anchors.centerIn: parent
interactive: true
boundsBehavior: Flickable.StopAtBounds
TableView {
id: tableView
width: 980
height: 480
anchors.centerIn: parent
sortIndicatorVisible: true
sortIndicatorOrder: 1
sortIndicatorColumn: 1
model: UserEventLog
style: TableViewStyle {
headerDelegate: Rectangle {
height: textItem.implicitHeight * 1.2
width: textItem.implicitWidth
color: "lightsteelblue"
border.color: "black"
border.width: .5
Text {
id: textItem
anchors.centerIn: parent
text: styleData.value
color: "black"
font.bold: true
}
}
}
TableViewColumn {
role: "id"
title: "id"
width: 100
}
TableViewColumn {
role: "userName"
title: "User Name"
width: 200
}
TableViewColumn {
role: "eventMessage"
title: "Event Message"
width: 372
}
TableViewColumn {
role: "dateTime"
title: "Date Time"
width: 201
}
}
}
}

anda_skoa
23rd September 2016, 18:51
What do you mean with "it doesn't work"?

Are you sure you want the scrollable content to be the same size as the visible area?

Cheers,
_

jfinn88
23rd September 2016, 19:29
from my understanding the scrollable content need to be smaller than the visible area ? mine is same size ...

I tried changing size of content:



contentHeight: tableView.height * .9
contentWidth: tableView.width *.9


I cant scroll-drag the table in the tableView by touch or by mouse drag....

I want to use the flickable area to make the tableView scrollable by touch (app will be running on touch screen)

I tried out putting some text to the log and don't get anything to out put



onFlickStarted: {
console.log("area flicked");
console.log(tableViewFlickable.dragging)
}


I'm starting to think it might not be possible to use flickable to scroll the tableView rows

when I wrap the tableView inside the flickable area It works kind of but the hole table moves instead of the rows scrolling in the tableView it self

I tried wrapping just the tableViewColumns in the flickable area that didn't work no data from model displays

Tried moving the flickable obj inside the tableView obj didn't seem to work either

I discovered: TableView inherits ScrollView. I don't think flickable will work with tableView it will work with listView because it is inherited by listView. TableView doesn't inherit flickable..... is this correct?

anda_skoa
24th September 2016, 10:46
from my understanding the scrollable content need to be smaller than the visible area ? mine is same size ...

Usually the content is larger, otherwise you wouldn't need to scroll.

You set the visible size to be the same as the content size, so your content will always be visible fully.



I want to use the flickable area to make the tableView scrollable by touch (app will be running on touch screen)

Any specific reason for using a Flickable? The TableView already scrolls its content itself, why do you also need to move the view itself?

Cheers,
_

jfinn88
26th September 2016, 19:45
I thought I would have to use the flickable area to make the tableView scroll by touch...

anda_skoa
26th September 2016, 20:07
A view that can't scroll by itself would be pretty useless IMHO.

Cheers,
_

jfinn88
26th September 2016, 23:24
I agree and it dose provide scroll bars by its self I get that, I'm not sure about the touch screen side though...

anda_skoa
27th September 2016, 09:22
I would be equally surprised if any QtQuick component would not work with touch screen, after all that's the main use case for this UI technology.

Cheers,
_

jfinn88
27th September 2016, 17:02
right! that’s why I chose to use it. I have found a know bug when using ScrollView will disable a flickable area in a listView. I'm wondering if there is something messing with my tableViews flickable inheritance that is similar to the listView issue. I'm making progress on my UI thanks for the help

was able to find property for enabling flickable area with ScrollView:

soln: flickableItem.interactive: true - allows flickable are in listView with ScrollView

not sure how to get tableView flickable to work now....