将方向更改为“水平”不会更改 RadListView 的滚动方向？

Posted 2023-04-13

【中文标题】将方向更改为“水平”不会更改 RadListView 的滚动方向？

【英文标题】：Changing orientation to 'horizontal' is not changing the scroll direction of RadListView?

【发布时间】：2019-08-30 10:27:01

【问题描述】：

我已经为 angular NativeScript 采用了汽车详细信息示例，并且我正在尝试使汽车列表水平滚动而不是垂直滚动。我已经删除了大部分给定的 html，只是想用剩余的 html 制作一个水平滚动列表。

我认为问题可能是 RadListView，但我不确定如何处理它。到目前为止，我已经到处尝试了orientation="horizo​​ntal"，并且还更改了一些布局类型。我还在 RadListView 上尝试了orientation="vertical"，因为NativeScipt 消息来源说这会起作用......我对Nativescript 很陌生，所以我希望这是一个简单的修复，因为我没有找到任何东西那会有所帮助。

这是我项目的 html 部分。整个东西被封装在一个水平方向的 StackLayout 中。如果您想看其他内容，请告诉我：

<RadListView orientation="horizontal" [items]="cars" (itemTap)="onCarItemTap($event)" >

    <ng-template tkListItemTemplate let-car="item" >

            <StackLayout orientation="horizontal">

                    <GridLayout rows="*, *, *" columns="*, *"  backgroundColor="purple">
                        <Label [text]="car.name" class="text-primary font-weight-bold"></Label>

                        <Image row="2" [src]="car.imageUrl" stretch="aspectFill"  class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

<ActivityIndicator [busy]="Loading"></ActivityIndicator>

目前，即使到处都是水平的，我也会得到一个垂直列表，其中每个项目都是汽车名称和汽车图片。但我希望下一个项目向右而不是向下填充。

【参考方案1】：

您应该使用ListViewLinearLayout 并将它的scrollDirection 设置为Horizontal。

<RadListView orientation="horizontal" [items]="cars" (itemTap)="onCarItemTap($event)" >

    <ListViewLinearLayout tkListViewLayout scrollDirection="Horizontal"></ListViewLinearLayout>

    <ng-template tkListItemTemplate let-car="item" >

            <StackLayout orientation="horizontal">

                    <GridLayout rows="*, *, *" columns="*, *"  backgroundColor="purple">
                        <Label [text]="car.name" class="text-primary font-weight-bold"></Label>

                        <Image row="2" [src]="car.imageUrl" stretch="aspectFill"  class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

<ActivityIndicator [busy]="Loading"></ActivityIndicator>

【讨论】：

我将 ng-template 部分更改为以下内容，它使我的应用程序变为空白。它没有返回任何错误。我不确定你想让我把它放在哪里。

您不应该更改模板，而是更改项目布局，只需参考给定链接中的文档，您就有示例。

谢谢！我不知道它不应该封装任何东西。它现在横向滚动。