2

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 enter image description here

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

Mahdi Khalili
  • 1,025
  • 15
  • 32
  • Doc says *Note: Due to an implementation detail, items placed inside a Flickable cannot anchor to the Flickable. Instead, use parent, which refers to the Flickable's contentItem. The size of the content item is determined by contentWidth and contentHeight.* – ymoreau Dec 03 '19 at 07:58
  • Can you explain more what you want to achieve exactly? Flickable does not really flow anything. Do you want the content to be scrolled on its right end by default? Have you tried to play with content position? – ymoreau Dec 03 '19 at 08:02
  • @ymoreau is this image enough detailed? – Mahdi Khalili Dec 03 '19 at 08:16
  • Much clearer yes, thanks. – ymoreau Dec 03 '19 at 08:22

1 Answers1

2

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.

Soheil Armin
  • 2,725
  • 1
  • 6
  • 18