QML：使用滚动型导致不正确的显示元素

Question

我使用Qt 5.2.1窗口（Qt Creator的3.0.1）

我有一个自定义QML组件，它的工作原理，当我加载在精到矩形：

import QtQuick 2.0 
import QtQuick.Controls 1.1 
Rectangle { 
    id: mainRectangle 
    anchors.fill: parent 
     Loader { 
      anchors.top: parent.top; 
      anchors.left: parent.left; 
      anchors.right: parent.right; 
      id: ld01; 
      onLoaded: { 
       ld01.visible = true; 
       anchors.top = parent.top; 
      } 
     } 
     Loader { 
      anchors.top: ld01.bottom; 
      anchors.left: parent.left; 
      anchors.right: parent.right; 
      id: ld02; 
      onLoaded: { 
       anchors.top = ld01.bottom; 
       ld02.visible = true; 
      } 
     } 
     Component.onCompleted: { 
      ld01.setSource("View_item2.qml"); 
      ld02.setSource("View_item2.qml"); 
     } 
} 

但是，当我试图把它放在一个ScrollView中，我的组件的元素被移动到某个地方。我应该实施什么样的技巧来正确使用ScrollView？

ScrollView { 
    id: mainTabLayout 
    anchors.fill: parent 
    anchors.margins: 4 
    //here I put a code from above (except imports, of course) 
} 

组件代码如下：

import QtQuick 2.1 
import QtQuick.Controls 1.1 
import QtQuick.Layouts 1.0 

Rectangle { 
    id: slv_layout 
    objectName: "itemColumnLayout" 
    anchors.left: parent.left 
    anchors.right: parent.right 
    anchors.margins: 1 
    property int minimal_height: 200 
    height: 400 
    color: "green" 
    MouseArea { 
     property bool is_pressed: false 
     property int initial_y: 0 
     property int proposed_y: 0 
     id: resizeStick 
     enabled: true 
     anchors.bottom: parent.bottom 
     height: 10 
     width: parent.width 
     hoverEnabled: true 
     onEntered: { 
      cursorShape = Qt.SizeVerCursor; 
     } 
     onPressed: { 
      is_pressed = true; 
      initial_y = mouseY; 
     } 
     onReleased: { 
      is_pressed = false; 
     } 
     onMouseYChanged: { 
      if (is_pressed) { 
       proposed_y = slv_layout.height + mouseY - initial_y; 
       if (proposed_y >= slv_layout.minimal_height) { 
        slv_layout.height += (mouseY - initial_y); 
        initial_y = mouseY; 
       } 
      } 
     } 
    } 

    Text { 
     id: slvTitle 
     text: "device name" 
     anchors.top: parent.top 
     anchors.left: parent.left 
     anchors.margins: 2 
    } 
    Rectangle { 
     anchors.top: slvTitle.bottom 
     anchors.left: parent.left 
     anchors.bottom: parent.bottom 
     anchors.right: parent.right 
     anchors.topMargin: 2 
     color: "blue" 
     Button { 
      id: slv_butt_run; 
      objectName: "slv_butt_run" 
      width: 60 
      height: width 
      text: "Run" 
      anchors.top: parent.top 
      anchors.left: parent.left 
      anchors.margins: 2 
     } 
     Button { 
      id: slv_butt_settings; 
      objectName: "slv_butt_settings" 
      width: 60 
      height: width 
      text: "Settings" 
      anchors.top: parent.top 
      anchors.left: slv_butt_run.right 
      anchors.margins: 2 
     } 
     Button { 
      id: slv_butt_stop; 
      objectName: "slv_butt_stop" 
      width: 60 
      height: width 
      text: "Stop" 
      anchors.top: slv_butt_run.bottom 
      anchors.left: parent.left 
      anchors.margins: 2 
     } 
     Button { 
      id: slv_butt_expand; 
      objectName: "slv_butt_expand" 
      width: 60 
      height: width 
      text: "Expand" 
      anchors.top: slv_butt_settings.bottom 
      anchors.left: slv_butt_stop.right 
      anchors.margins: 2 
     } 
     TextArea { 
      id: slv_log_area 
      anchors.left: slv_butt_expand.right 
      anchors.top: parent.top 
      anchors.bottom: parent.bottom 
      anchors.right: parent.right 
      anchors.margins: 3 
     } 
    } 
} 

如何看起来当一切都OK： 如何看起来当不正常：

Answer 1

按照滚动型documentation，

ScrollView可用于替换Flickable或装饰现有的Flickable。 ...子项的宽度和高度将用于定义内容区域的大小。

ScrollView需要知道两个宽高对：第一个是用于显示区域的宽度和高度，第二个是内容的宽度和高度。如果内容的区域大于显示区域，则显示区域将在其上添加滚动条。

在您的例子：

ScrollView { 
    id: mainTabLayout 
    anchors.fill: parent 
    //other properties 

    Rectangle { 
     id: mainRectangle 
     anchors.fill: parent 
     //... 
    } 
} 

宽度和内容的高度被绑定到所述显示区域，使得这两个区域是相同的大小。显示区域的宽度和高度是mainTabLayout中的显示区域的宽度和高度，它绑定到它的父级;内容的宽度和高度为mainRectangle中的内容，该内容绑定到它的父项mainTabLayout。因此，ScrollView无法正常工作，因为ScrollView预计这两个值是不同的，没有绑定在一起。

要解决您的问题，您可以明确指定宽度和高度为mainRectangle。请勿使用anchors.fill:parent将mainRectangle的宽度和高度绑定到其父项。

ScrollView { 
    id: mainTabLayout 
    anchors.fill: parent 
    //other properties 

    Rectangle { 
     id: mainRectangle 

     width: 800; height: 800 //not binding to parent.width & height 

     //... 
    } 
} 

而且这可以正常工作。

Answer 2

实际上，我仍然不知道，为什么代码的工作原理如上所述。但我找到了可以接受的方法来解决任务的其他方式。

看起来像是“将一根针放入蛋中，将蛋放入鸭子中，将鸭子放入兔子中”： ScrollView必须包含一个具有相应ListModel的ListView组件，并且一个自定义组件应该充当委托。只有使用ListModel，我才有正确的自动滚动和相对放置支持。

ScrollView { 
    id: id_scrollView 
    anchors.fill: parent 
    objectName: "ScrollView" 
    frameVisible: true 
    highlightOnFocus: true 

    style: ScrollViewStyle { 
     transientScrollBars: true 
     handle: Item { 
      implicitWidth: 14 
      implicitHeight: 26 
      Rectangle { 
       color: "#424246" 
       anchors.fill: parent 
       anchors.topMargin: 6 
       anchors.leftMargin: 4 
       anchors.rightMargin: 4 
       anchors.bottomMargin: 6 
      } 
     } 
     scrollBarBackground: Item { 
      implicitWidth: 14 
      implicitHeight: 26 
     } 
    } 

ListView { 

    id: id_listView 
    objectName: "ListView" 
    anchors.top: parent.top 
    anchors.left: parent.left 
    anchors.right: parent.right 
    anchors.rightMargin: 11 
    flickableDirection: Flickable.VerticalFlick 
    boundsBehavior: Flickable.StopAtBounds 
    delegate: view_component 
    model: id_listModel 

    ListModel { 
     id :id_listModel 
     objectName: "ListModel" 
    } 

    //delegate: View_item2.Item 
    Component { 
     id: view_component 
     View_item2 { 
      objectName: name 
     } 
    } 

}