Question

我在管理NativeScript-Vue ListView中的组件状态时遇到问题。我遇到了以下文章中所述的完全相同的问题：https://www.nativescript.org/blog/managing-component-state-in-nativescript-listview。本文没有解释Nativescript-Vue的解决方案。我在ListView中使用Switch组件来保持列表项的状态（无论是否选中），但是没有办法。有没有人遇到同样的问题，并在NativeScript-Vue的文章中应用了解决方案？

Answer 1

实际上很容易修复。由于listview重用了组件，因此我们不应该在组件本身内部设置数据。我们应该做的是添加/更改数组中对象内部的数据，以便Listview可以正确更新项目。

您可以添加一个事件，该事件在父项上触发以通过开关轻触来更新已更改的开关列表，因此请执行此操作，因为已更改的开关事件将由listview中组件的每次重新渲染/重复使用触发。这有点难以管理，但确实有效。

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="3"
    android:rowCount="3"
    android:orientation="horizontal"
    android:background="#CCCCCc">

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

    <ImageView
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:layout_margin="4dp"
        android:background="#FFFFFF"
        android:src="@drawable/image"
        />

</GridLayout>

您还可以删除开关并在列表视图上添加一个itemTap，然后在列表中设置数据：

<Template>
  <StackLayout @tap="onSwitchTapped" orientation="horizontal">
     <Switch :isUserInteractionEnabled="false" v-model="item.isActive"/>
  </StackLayout>
</Template>
<Script>
   export default {
      props: {
           item: null,
           onItemUpdated: null
      }
      methods: {
         onSwitchTapped()
         {
             this.item.isActive = !this.item.isActive;
             if(onItemUpdated != null)
                onItemUpdated(this.item);
         }
      }
   }
</Script>

<Template>
    <ListView for="item in array">
        <component :item="item" :onItemUpdated="onItemUpdated"/>
    </ListView>
</Template>

<Script>
   export default {
       onItemUpdated(item) {
          this.array[item.index] = item;
       }
   }
</Script>

在NativeScript-Vue ListView中管理组件状态

1 个答案: