Right to left Flickable

Question

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

Answer 1

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.