有没有办法将 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
来检测平板电脑与手机。
最佳答案
是的,您可以使用platformModule.device.deviceType
来识别设备是移动设备还是平板电脑。
关于布局,我认为您应该使用 RadListView,如果是移动设备,请使用线性布局;如果是平板电脑,则应使用 2 列的网格布局。
Here是您将以编程方式更改布局的方式。这是来自 TypeScript 应用程序的示例,但代码在 Vue 上仍然应该完全相同,在 RadListView 的 @loaded
事件中,您可以设置基于正确布局的设备类型。
关于android - NativeScript ListView : Mobile 1 column/Tablet 2 columns,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54773456/