ListView 不在 ScrollView 和 StackLayout 内呈现，在 ios 中具有水平方向 - nativescript-vue答案

【问题标题】：ListView is not rendering inside ScrollView and StackLayout with orientation horizontal in ios - nativescript-vueListView 不在 ScrollView 和 StackLayout 内呈现，在 ios 中具有水平方向 - nativescript-vue
【发布时间】：2019-06-16 11:52:02
【问题描述】：

在 ScrollView 和 StackLayout 中实现时，ListView 在 ios 中以水平方向实现时不呈现，但在 android 中呈现相同 - 垂直和水平缩放表

  <ScrollView orientation="horizontal">
    <StackLayout orientation="horizontal">
      <RadListView for="todo in monthlyMeterData">
        <v-template>
          <GridLayout columns="150,100,100,100,100,100,100,100,100,100,100,100,100,100">
            <Label :text="todo.region" col="0"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="1"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="2"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="3"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="4"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="5"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="6"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="7"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="8"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="9"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="10"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="11"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="12"/>
            <Label :text="getMonthData(todo.monthlyCount,'January')" col="13"/>
          </GridLayout>
        </v-template>
      </RadListView>
    </StackLayout>
  </ScrollView>

Ios Android

【问题讨论】：

以下建议是正确的，但嵌套多个可滚动元素并不是一个好习惯，因此您可能需要重新考虑 UI。此外，iOS 上没有显示 ListView / RadListView，因为这是站在它们后面的本机元素 (UITableVidew) 的本机行为。问题是 ListView 和 R\adListView 将需要显式高度或嵌套在具有显式高度的父级中。简而言之 - 避免嵌套可滚动元素并使用高度在 iOS 上创建列表视图（例如，您可以使用）

标签： android ios vue.js nativescript nativescript-vue

【解决方案1】：

由于某种原因，在 iOS 上，没有正确计算 RadListView 宽度。由于您有固定宽度的列，您可以强制总宽度（1450）。此外，您不需要<StackLayout>。我得到它使用这个代码：

<ScrollView orientation="horizontal">
  <RadListView for="todo in monthlyMeterData" width="1450">
    <v-template>
      <GridLayout columns="150,100,100,100,100,100,100,100,100,100,100,100,100,100">
      <!-- ... -->

希望对你有帮助！

【讨论】：