NativeScript ListView：移动1列/平板电脑2列

Question

在平板电脑上查看时，是否有办法将ListView（包含单个容器的物料）从移动设备上的一（1）列更改为两（2）列？

+ -------- +
|项目1 |
+ -------- +
|项目2 |
+ -------- +
|项目3 |
+ -------- +
|项目4 |
+ -------- +

+ -------- + -------- +
|项目1 |项目2 |
+ -------- + -------- +
|项目3 |项目4 |
+ -------- + -------- +

我已经对ListView和StackLayout上的属性进行了修改，但没有取得任何成功。

<ScrollView orientation="vertical" class="container">

    <ListView for="item in listOfItems" separatorColor="transparent">
        <v-template>
            <StackLayout>
                <GridLayout columns="150,150" rows="35,25" width="326" height="90" class="listing">
                    <Label :text="item.title" col="0" row="0" />
                </GridLayout>
            </StackLayout>
        </v-template>
    </ListView>

</ScrollView>

除非另行通知，否则我正在使用platformModule.device.deviceType来检测平板电脑还是手机。

Answer 1

是的，您可以使用platformModule.device.deviceType来识别设备是移动设备还是平板电脑。

关于布局，我认为您应该使用RadListView，如果它是移动的，则使用线性布局；如果是平板电脑，则使用2列的网格布局。

Here是您如何以编程方式更改布局的方式。这是来自TypeScript应用程序的示例，但代码仍然在Vue上完全相同，在RadListView的@loaded事件中，您可以设置基于布局的正确设备类型。