I have a QtQuick Controls 1.3 SplitView(as I am on QT 5.11), which contains 3 rectangles in vertical orientation. It displays fine, and I can drag-resize the childs as intended.
Now I want to add a button which allows the user to completely hide the bottom most rectangle, effectively collapsing it. However, nothing I am trying to resize the rect works:
import QtQuick.Controls 1.3 as C1
[...]
C1.SplitView {
id: splitView
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: parent.width - flightSelector.width - separator.width
orientation: Qt.Vertical
LateralChart {
id: lateralChart
width: parent.width
height: mainPage.height * 0.75
Layout.minimumHeight: 30
Layout.maximumHeight: mainPage.height - 30 - 30
}
UtilityBar {
id: utilityBar
Layout.minimumHeight: 30
Layout.maximumHeight: 30
onCollapse: {
console.log("minimize")
flightList.height = 0 // no effect
flightList.preferredHeight = 0 // no effect
flightlist.Layout.maximumHeight = 0 // no effect
flightList.shouldCollapse = true // no effect
}
}
FlightListTable {
id: flightList
width: parent.width
Layout.minimumHeight: 0
Layout.maximumHeight: mainPage.height - 60 - 30
model: flightListFilterModel
property bool shouldCollapse: false
C1.SplitView.preferredHeight: shouldCollapse ? 0 : 300
}
}
[...]
If I just go flightList.visible = false, then the rect will be hidden, but the position of the middle rect remains, so it is positioned wrong (it should move to the bottom).
How can I resize SplitView child contents dynamically via JS code?
According to the docs, there must always be one (and only one) child object that has Layout.fillheight set to true. By default, it will choose the last visible child in the SplitView. In your case, it sounds like you want that to actually be the first child. So adding Layout.fillHeight: true to your LateralChart should give you the desired output.
In a QML TestCase, I'm trying to setup automatic scrolling of a ListView that is contained inside a Flickable (to add a custom footer that can be flicked into view, which wouldn't happen with just ListView { footer: Component {} })
However, the mouseDrag only seems to click the correct coordinate, but not drag it to any direction. Here is a simplified version that is as close to the real one as possible:
Implementation.qml
import QtQuick 2.5
FocusScope {
width: 1920
height: 1080
Flickable {
objectName: 'flickableList'
boundsBehavior: Flickable.StopAtBounds
clip: true
width: parent.width
height: 240
contentHeight: 500
ListView {
interactive: false
height: parent.height
width: parent.width
model: ['example1', 'example2', 'example3', 'example4', 'example5']
delegate: Item {
width: 300
height: 100
Text {
text: modelData
}
}
}
}
Item {
id: footer
height: 100
width: parent.width
}
}
TheTest.qml
// The relevant part
var theList = findChild(getView(), 'flickableList')
var startY = 220
var endY = 20
mouseDrag(theList, 100, startY, 100, endY, Qt.LeftButton, Qt.NoModifier, 100)
So, when I'm viewing the UI testrunner, I can see it clearly click on the correct delegate (it has a focus highlight in the actual implementation), ie. the third item "example3", which starts at Y 200 and ends at Y 300). But the drag event never happens. Nothing moves on the screen, and compare(theList.contentY, 200) says it is still at position 0. I would expect it to be at 200, since the mouse is supposed to be mouseDragging from position 220 to 20, ie. scrolling the list down by 200. And 220 is also within the visible height (240).
Just to be sure, I also reversed the Y values, but also no movement:
var theList = findChild(getView(), 'flickableList')
var startY = 20
var endY = 220
mouseDrag(theList, 100, startY, 100, endY, Qt.LeftButton, Qt.NoModifier, 100)
Also, as the 3rd item clearly is clicked on (it gets highlighted), the passed item theList (= the Flickable), should be valid.
Edit:
Oh, and this does scroll the list, but it goes all the way to the bottom of the list (388 px down in the actual implementation, even when the delta is just 30 pixels):
mousePress(theList, startX, startY)
mouseMove(theList, endX, endY)
mouseRelease(theList, endX, endY)
So the question is:
Does mouseDrag only work for specific types of components (ie. does not work on Flickable?), or is there something missing? How can I get it to scroll the list down? Thanks!
Your tag says you're using Qt 5.5 - I would recommend trying Qt 5.14 if possible, as there was a fix that might help:
mouseDrag(): ensure that intermediate moves are done for all drags
[...]
In practice, this means that mouseDrag() never did intermediate moves
(i.e. what happens during a drag in real life) for drags that go from
right to left or upwards.
https://codereview.qt-project.org/c/qt/qtdeclarative/+/281903
If that doesn't help, or upgrading is not an option, I would recommend looking at Qt's own tests (although they are written in C++):
https://code.qt.io/cgit/qt/qtdeclarative.git/tree/tests/auto/quick/qquickflickable/tst_qquickflickable.cpp#n1150
I think mouseDrag only works for mouse area. You could wrap every object with that.
But in the end, you need to use a mouse area inside you delegate and Drag and Drop it.
https://doc.qt.io/qt-5/qml-qtquick-drag.html
import QtQuick 2.5
FocusScope {
width: 1920
height: 1080
Flickable {
objectName: 'flickableList'
boundsBehavior: Flickable.StopAtBounds
clip: true
width: parent.width
height: 240
contentHeight: 500
ListView {
interactive: false
height: parent.height
width: parent.width
model: ['example1', 'example2', 'example3', 'example4', 'example5']
delegate: DelegateList{
textAreaText = modelData
}
}
}
Item {
id: footer
height: 100
width: parent.width
}
}
And the DelegateList.qml
Item {
id: root
property alias textAreaText: textArea.text
width: 300
height: 100
Text {
id: textArea
}
Drag.active: dragArea.drag.active
Drag.hotSpot.x: 10
Drag.hotSpot.y: 10
MouseArea {
id: dragArea
anchors.fill: parent
drag.target: parent
}
}
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.
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?
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.