Как сделать клип ScrollView только вертикально?

Question

ScrollView зажимает все его содержимое по своим размерам. Можно ли заставить его работать только сверху и снизу, но разрешить детям выходить из рамки родителя справа и слева?

Answer 1

Я могу представить только одну причину, почему вы не устанавливаете ширину ScrollView на большее значение (ширина contentItem).

Чтобы быть в состоянии сделать это, а не сдерживая ScrollView в его ширина, вы можете использовать простой прием:

Item { 
    id: limitedWidthItemToAnchorTo 
    width: 200 // the width the ScrollView was supposed to have 
    height: 400 

    ScrollView { 
     width: contentItem.width + __verticalScrollBar.width// Don't limit the width. 
     height: 400 // Limit only the height. 
     horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff // You don't need them. 
     contentItem: Rectangle { 
      width: 700 // This will set the ScrollViews width. 
      height: 600 // The height will be clipped by the ScrollView. 
         // You can scroll though. 

      gradient: Gradient { 
       GradientStop { position: 0; color: 'red' } 
       GradientStop { position: 1; color: 'blue' } 
      } 
      border.width: 10 
     } 
    } 
} 

Вы обернуть его в Item, якорь к этому, и вы» Хорошо. Альтернативно вы можете использовать маски, но это было бы ... более сложным.

Переносить нельзя только горизонтально или вертикально, так как обрезка выполняется с помощью ограничивающей коробки Item.

Answer 2

Если вы хотите только прокручивать в одном направлении, то просто установите ширину/высоту элемента контента на ширину/высоту ScrollView, используя привязки свойств (поскольку элементы внутри ScrollView возвращаются к ScrollView.contentItem). В приведенном ниже примере прокручивается только по вертикали. Я протестировал его, если вам нужно подтверждение, что оно действительно работает.

Item { 
    ScrollView { 
     id: scrollview1 
     anchors.fill: parent 
     anchors.margins: 20 
     clip: true 

     ColumnLayout { 
      width: scrollview1.width 
     } 
    } 
}