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

Posted

技术标签:

【中文标题】ListView 不在 ScrollView 和 StackLayout 内呈现,在 ios 中具有水平方向 - nativescript-vue【英文标题】:ListView is not rendering inside ScrollView and StackLayout with orientation horizontal in 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>

IosAndroid

【问题讨论】:

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

由于某种原因,在 iOS 上,没有正确计算 RadListView 宽度。由于您有固定宽度的列,您可以强制总宽度(1450)。此外,您不需要&lt;StackLayout&gt;。我得到它使用这个代码:

<ScrollView 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">
      <!-- ... -->

希望对你有帮助!

【讨论】:

以上是关于ListView 不在 ScrollView 和 StackLayout 内呈现,在 ios 中具有水平方向 - nativescript-vue的主要内容,如果未能解决你的问题,请参考以下文章

android 有弹性的ScrollView 简单实现,与处理ScrollView和ListView,GridView之间的冲突

listview 和 scrollview 一起使用 listview 测量高度不准确

使用LinearLayout实现ListView,解决ListView和ScrollView滚动冲突

android scrollview嵌套listview 页面有多余空白

浅谈android中的ListView合集系列之解决ScrollView和ListView嵌套冲突

ListView和ScrollView冲突