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 来检测平板电脑与 phone。

Answer 1

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

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

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

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

NativeScript ListView: Mobile 1 column/ Tablet 2 columns

android

ios

nativescript

nativescript-vue