将方向更改为 'horizontal' 不会更改 RadListView 的滚动方向吗?

Changing orientation to 'horizontal' is not changing the scroll direction of RadListView?

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

我认为问题可能出在 RadListView 上,但我不确定如何处理它。到目前为止,我已经在所有地方尝试了 orientation="horizontal" 并且还更改了一些布局类型。我还在 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" height="120" class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

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

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

您应该使用 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" height="120" class="m-r-20"></Image>
                    </GridLayout>

            </StackLayout>

    </ng-template>

</RadListView>

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