Cascades 3.9 -制作容器卷轴

Question

我使用的是cascades 3.9，在制作容器卷轴时遇到了困难。这是我在视觉上看到的代码。

<stackLayout id="parent_container" dockLayout.halign="center"
             y="60"
             height="{contentHeight}"
             width="{contentWidth}"
             >

     <gridLayout columns="2" width="{contentWidth}" id="want_scroll">

       <text string="First Name" />
       <text string="First name goes here" font="{@csm.fc.font.h4}" />

       <text string="Last Name" />
       <text string="Last name goes here" font="{@csm.fc.font.h4}" />

       // more items, causing the height to be more than that of the parent

     </gridLayout>

​

我希望"want_scroll“能够滚动，因为它的高度大于"parent_container”的高度{contentHeight}。我认为将"want_scroll“包装在scrollView中并将pointer.scrollable设置为true就可以了。但是这样做并没有什么不同。

  <scrollView pointer.scrollable="true">
     <gridLayout columns="2" width="{contentWidth}" id="want_scroll">

       <text string="First Name" />
       <text string="First name goes here" font="{@csm.fc.font.h4}" />

       <text string="Last Name" />
       <text string="Last name goes here" font="{@csm.fc.font.h4}" />

       // more items, causing the height to be more than that of the parent

     </gridLayout>
  </scrollView>

如何添加滚动到一个简单的容器？

请注意，通过滚动，我只是希望容器是可滚动的，而我的问题不是关于在右侧显示滚动条。

Answer 1

您还需要设置ScrollView的大小，以便它知道何时滚动。下面是一个示例：

import bb.cascades 1.0

Page {
     content: Container {
             layout: StackLayout {  }
             ScrollView {
                   content: Container {
                                          layout: StackLayout { }
                                          Label {
                                                text: "Start"
                                          }
                          //snip...  A bunch more labels would go here...

                                         Label {
                                                text: "End"
                                         }
                                  }
                   minWidth: 500
                   minHeight: 1280
           }
      }
}