when i add a child into Flickable
it anchors that to the left of whole control,but i want flickable
's child anchors to the right of whole control (i think when there is anything inside flickable its flickableItem implicitWidth affects the whole controls width thats why i cant use anchors.right = parent.right
), there is no layoutDirection
property in Flickable
and LayoutMirroring
is not working in flickable, how can i force Flickable to paint child from right margin of its body?
this is my flickable control :
// ScrollableItem.qml
Flickable{
id:root
contentWidth: pane.implicitWidth
contentHeight: pane.implicitHeight
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
default property alias content : pane.contentItem
Pane{
id:pane
}
ScrollIndicator.vertical: ScrollIndicator{
}
ScrollIndicator.horizontal: ScrollIndicator{
}
}
and i use it like this :
ScrollableItem{
width : parent.width
height : parent.height
RowLayout{
spacing: 500
layoutDirection: Qt.RightToLeft
Button{
}
Button{
}
Button{
}
}
}
Qml dont care about width : parent.width
of ScrollableItem
and if i set width inside control it wont flick , i tried to use anchors.right in child's too but didnt work. is there anyway to force flickable child to flow from right of screen?
UPDATE : let me show you in a picture
you see where pane anchored? anchoring pane to right is impossible and there is no layout direction and width of pane is depend on child width which is a rowLayout so if pane width is lower than flickable width it will always drawn on the left edge of flickable which i want to drawn in right edge of flickable
Actually, a Flickable should not logically have anchoring capabilities. So you need to explicitly move the Flickable to the right by :
// ScrollableItem.qml
Flickable{
id:root
contentWidth: pane.implicitWidth
contentHeight: pane.implicitHeight
boundsBehavior: Flickable.StopAtBounds
flickableDirection: Flickable.AutoFlickIfNeeded
default property alias content : pane.contentItem
leftMargin: pane.contentWidth >= root.width ? 0 : root.width - pane.contentWidth
contentX: pane.mirrored ? pane.width : 0;
property var lastWidth : 0
Pane{
id:pane
}
onWidthChanged: {
contentX += lastWidth-width
lastWidth = width;
}
ScrollIndicator.vertical: ScrollIndicator{}
ScrollIndicator.horizontal: ScrollIndicator{}
}
and i use it like this :
ScrollableItem{
width : parent.width
height : parent.height
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
RowLayout{
spacing: 500
layoutDirection: Qt.RightToLeft
Button{
}
Button{
}
Button{
}
}
}
This works quite well for me. When the pane
has smaller width than the Flickable, you should add the remaining space to leftMargin
to keep the content at the right side.