滚动视图在布局中换行时不起作用



我注意到,当ScrollView被包装在另一个布局小部件中时,它会停止响应平移。我正在寻找一种解决方案,即使在包装时也能让ScrollView按预期工作。这是Playground中的一个示例应用程序,我在这里发布了它的模板

此示例不滚动:

<AbsoluteLayout #wrapTop class="wrapTop" left="0" top="0" width="100%" height="100%">
<ScrollView orientation="horizontal" sdkExampleTitle sdkToggleNavButton>
<GridLayout class="m-15" columns="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
<Label width="50" height="50" class="h3 m-15" col="0" text="Title 1"></Label>
<Label width="50" height="50" class="h3 m-15" col="1" text="Title 2"></Label>
<Label width="50" height="50" class="h3 m-15" col="2" text="Title 3"></Label>
<Label width="50" height="50" class="h3 m-15" col="3" text="Title 4"></Label>
<Label width="50" height="50" class="h3 m-15" col="4" text="Title 5"></Label>
<Label width="50" height="50" class="h3 m-15" col="5" text="Title 6"></Label>
<Label width="50" height="50" class="h3 m-15" col="6" text="Title 7"></Label>
<Label width="50" height="50" class="h3 m-15" col="7" text="Title 8"></Label>
<Label width="50" height="50" class="h3 m-15" col="8" text="Title 9"></Label>
<Label width="50" height="50" class="h3 m-15" col="9" text="Title 10"></Label>
<Label width="50" height="50" class="h3 m-15" col="10" text="Title 10"></Label>
<Label width="50" height="50" class="h3 m-15" col="11" text="Title 11"></Label>
<Label width="50" height="50" class="h3 m-15" col="12" text="Title 12"></Label>
<Label width="50" height="50" class="h3 m-15" col="13" text="Title 13"></Label>
<Label width="50" height="50" class="h3 m-15" col="14" text="Title 14"></Label>
<Label width="50" height="50" class="h3 m-15" col="15" text="Title 15"></Label>
</GridLayout>
</ScrollView>
</AbsoluteLayout>

我认为这里不需要AbsoluteLayout,至少当您不打算将子组件放置在绝对位置时是这样。

此外,当你想简单地以水平方向堆叠项目时,你不需要GridLayout,你可以使用水平方向的StackLayout。

我已经更新了你的游乐场示例。

有关布局的详细信息,请访问https://www.nslayouts.com/

更新:

感谢@DrAchernar,他提出了一个有效的观点。如果您计划渲染n个看起来相似的项目,则应考虑使用ListView/RadListView。RadListView支持不同的布局&水平方向,应该适合您的要求。

最新更新