For a project I am showing data in a table, the newest data is the most relevant so I want that to be the most visible but it should also be possible to see the earlier data.
The following code contains the view with a scrollbar.
ScrollView{
id:dataScrollView
width: parent.width
anchors.top: headerWrapper.bottom
height:parent.height - headerWrapper.height
ScrollBar.vertical.policy: ScrollBar.AlwaysOn;
clip: true
TableView{
id: table
columnSpacing: 1
rowSpacing: 1
clip: true
implicitHeight: column.height - 33
implicitWidth: column.width
model: modelItem
delegate: compColored
onContentHeightChanged: {
//new data has come in I want to scroll to the bottom
console.log("update scroll to bottom" )
}
}
}
I know exactly where to put the code but i do not know how I can make the scrollbar go to the bottom or how to set the position of the scrollbar.
Can someone point me out to how I can set the position of the scrollbar?
As TableView inherits Flickable, you can reposition the contentItem within the viewport simply by:
onContentHeightChanged: {
table.contentY = table.contentHeight - table.height
}
and the Flickable's contentItem bottom area will be visible in the viewport.
Related
I want to update the padding of a ScrollView if there is a scrollbar visible, but on the other hand, the visibility of the scrollbar is dependent on the height/width of the content inside the scrollbar, which changes when the padding changes. The following causes a binding loop:
ScrollView {
id: control
rightPadding: Scrollbar.vertical.visible ? Scrollbar.vertical.width : 0
....
ScrollBar.vertical: ScrollBar {
parent: control
visible: control.height < height
...
}
}
How can I achieve this without a binding loop? Thanks
I was unable to get your code frag to work - it seems like your code should depend on the contents of your ScrollView, but this is not included in your code frag, and it may be missing some other references.
Anyway, I suggest approaching this a little differently - change the ScrollView's content's width based on whether or not the ScrollBar is visible. I also set the ScrollBar policy instead of visibility. I have created a full example where you can add or remove content using a slider for demonstration:
import QtQuick 2.15
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
ApplicationWindow {
id: root
visible: true
height: 500
width: 500
ColumnLayout {
anchors {
fill: parent
}
Slider {
// use slider to add delegates to the ScrollView to toggle the scroll bar visibility
id: slider
to: 20
}
ScrollView {
id: scroll
Layout.fillHeight: true
Layout.fillWidth: true
ScrollBar.vertical.policy: scrollBarVisible ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
property bool scrollBarVisible: scroll.contentHeight > scroll.height
ColumnLayout {
width: scroll.scrollBarVisible ? scroll.width - scroll.ScrollBar.vertical.width : scroll.width // change the width of the
Repeater {
model: slider.value
delegate: Rectangle {
color: "tomato"
Layout.fillWidth: true
Layout.preferredHeight: 150
}
}
}
}
}
}
One thing to note though - your ScrollView content cannot have its height depend on its width, for example, if the content had some Text that wraps if there is not enough width, causing it to get taller when the width decreases. This would get back into infinite-loop territory.
The following QML code:
Window {
id: window
width: 450
height: 700
visible: true
StackView {
id: mainStack
property Item itemTest: Item {
id: itemTest
ColumnLayout {
id: mainLayout
width: mainStack.width
ScrollView {
id: scrollview
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ColumnLayout{
id: colLayout
anchors.fill: scrollview
}
}
}
}
initialItem: itemTest
anchors.fill: parent
}
}
outputs "QML ColumnLayout: Cannot anchor to an item that isn't a parent or sibling."
Replacing "anchors.fill: scrollview" by "anchors.fill: parent" in the above code makes this message disappear but then the ColumnLayout does not seem to fill the ScrollView.
Given this behaviour, I come to the conclusion that the ScrollView in this QML file isn't actually the parent of "colLayout", which comes against my first intuition about the way parenting works in QML.Can someone explain to me what is meant exactly by the keyword "parent" in QML ? Many thanks in advance.
The issue is that Controls use the concept of a contentItem. While the ScrollView itself is a Control which itself is in turn an Item, the children are parented to a different Item called contentItem.
More info here:
https://doc.qt.io/qt-5/qml-qtquick-controls2-control.html#contentItem-prop
See also the comment there:
Note: Most controls use the implicit size of the content item to calculate the implicit size of the control itself. If you replace the content item with a custom one, you should also consider providing a sensible implicit size for it (unless it is an item like Text which has its own implicit size).
You don't want to grow your ColumnLayout to match the contentItem, the contentItem will automatically resize to fit the implicit size of the ColumnLayout.
If the effect you are trying to get is to match the size of the ColumnLayout to that of the ScrollView, then use something like:
ColumnLayout{
id: colLayout
implicitWidth: scrollview.width
implicitHeight: scrollview.height
height: implicitHeight
width: implicitWidth
}
But in that case, why bother using a ScrollView? Normally you would allow the ColumnLayout to manage its implicit size normally based on it's children. When the contentItem ends up overflowing the ScrollView, then it starts to automatically scroll.
In QML Swipe View is not bidirectional.So I need a swipe view
A code sample will be very beneficial for me.
I need to keep only 3 items in my view & at a time only item should be visible & on swiping the view in either way left or right element should be on center.
This code solves half problem That is why I posted as answer
import QtQuick 2.0
Item {
property alias model: view.model
property alias delegate: view.delegate
property alias currentIndex: view.currentIndex
property real itemHeight: 60
clip: true
PathView {
id: view
anchors.fill: parent
snapMode: PathView.NoSnap
pathItemCount: height/itemHeight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
dragMargin: view.width/5
path: Path {
startY: view.width/4; startX:-itemHeight/2 -50
PathLine { y: view.width/4; x: (view.pathItemCount*itemHeight + 3*itemHeight) }
}
}
}
And this is My Item :
Item{
id:widgetMain
width :480
height : 240
property int delegateHeight: widgetMain.height
property int delegateWidth : widgetMain.width
Spinner {
id: spinner
width: parent.width;
height: parent.height;
focus: true
model: ["qrc:/Tile1.qml",
"qrc:/Tile2.qml"
,"qrc:/Tile3.qml"]
itemHeight: 150
delegate: Loader {
width: delegateWidth
height: delegateHeight
source: modelData
}
}
}
Now If I swipe towards any direction, It shows only 1 tile in the view. & When my drag reaches to half way, then the tile removes & shifts to last.
Here I want to display that one tile is swiping & 2nd tile is coming from behind(Just like a Swipe view).
Now can you help me please?
I have a list view. If i click on a cell, that specific cell need to move to the center with a small scrolling animation. With my code, the clicked cell will comes to the center without any animation.
Is it possible to add animation for that ?
Am putting my code below :
ListView {
id: source_list
width: 1080
height: 480
spacing: 50
model: mediaSongsModel
delegate: mediaSongsDelegate
focus: true
interactive: true
clip: true
highlightMoveDuration: 50
snapMode: ListView.SnapToItem
boundsBehavior:Flickable.StopAtBounds
preferredHighlightBegin: 260/scaleFactor
preferredHighlightEnd: 260/scaleFactor
highlightRangeMode: ListView.StrictlyEnforceRange
}
Component {
id: mediaSongsDelegate
Item {
id: wrapper
width: 1080
height: 200
MouseArea {
anchors.fill: parent
onClicked: {
source_list.currentIndex = index
source_list.positionViewAtIndex(index,ListView.Center)
}
}
}
}
If the current item should always be in the center or within a specific are of the view, then you can use the preferredHighlightBegin and preferredHightlightEnd properties to define that area.
The value of highlightRangeMode controls if and if yes, how strictly this applies. E.g. if the first item is the current item and the value is StriclyEnforeRange then the item will be within the specified area even if that means scrolling further up than a normal "scroll to top" would.
Something like that should work
ListView {
preferredHighlightBegin: height / 2 - 100 // 100 being item height / 2
preferredHighlightEnd: height / 2 + 100 // 100 being item height / 2
highlightRangeMode: ListView.StrictlyEnforceRange
}
I've solved my issue by removing the following line of code:
source_list.positionViewAtIndex(index,ListView.Center);
The animation correctly worked.
In the picture Test, Test 1 and Test 2 are in the ListView. In this case Test element is highlighted. How can I modify view behavior to ensure that current (highlighted) item stays always in the middle of the list? What I want to achieve is represented in the following picture:
You just need highlightRangeMode with preferredHighlightBegin and preferredHighlightEnd. From the documentation:
These properties affect the position of the current item when the list is scrolled. For example, if the currently selected item should stay in the middle of the list when the view is scrolled, set the preferredHighlightBegin and preferredHighlightEnd values to the top and bottom coordinates of where the middle item would be. If the currentItem is changed programmatically, the list will automatically scroll so that the current item is in the middle of the view. Furthermore, the behavior of the current item index will occur whether or not a highlight exists.
Here is a full example of an horizontal ListView with the current item positioned at the center.
import QtQuick 2.4
import QtQuick.Window 2.2
Window {
width: 300
height: 150
visible: true
ListView {
anchors.fill: parent
spacing: 5
model: 20
delegate:
Rectangle {
width: 30
color: ListView.view.currentIndex === index ? "red" : "steelblue"
height: ListView.view.height
Text {
anchors.centerIn: parent
text: index
font.pixelSize: 20
}
}
orientation: Qt.Horizontal
preferredHighlightBegin: 150 - 15
preferredHighlightEnd: 150 + 15
highlightRangeMode: ListView.StrictlyEnforceRange
}
}
You could have a look at ListView's positionViewAtIndex method and see if that helps.