ListView、RadListView 等最佳实践
这可能是所有移动设备上**最重要**的控件，对感知到的应用程序性能影响最大。
ListView、RadListView 以及任何使用某种形式的行回收和视图模板/组件的视图组件。
错误设置
首先让我们看看一种错误的 ListView 行模板设置方式以及原因
xml
<ListView items="{{ myTitles }}" class="list-group">
<ListView.itemTemplate>
<StackLayout>
<r:Render when="{{ !showSomethingElse }}">
<r:Render.template>
<StackLayout backgroundColor="lightblue">
<Label text="{{ title }}" textWrap="true" class="title" />
</StackLayout>
</r:Render.template>
</r:Render>
<r:Render when="{{ showSomethingElse }}">
<r:Render.template>
<GridLayout rows="auto,5,auto,5,auto" backgroundColor="red">
<Label text="{{ title }}" textWrap="true" class="title" />
<Label row="2" text="Something Else" textWrap="true" class="title" />
<Label
row="4"
text="Could show yet anything thing here"
textWrap="true"
class="title"
/>
</GridLayout>
</r:Render.template>
</r:Render>
</StackLayout>
</ListView.itemTemplate>
</ListView>这使用了自定义的 Render 组件，该组件**模拟**了各种前端框架集成在使用 v-if (Vue) 和 ngIf (Angular) 时引擎盖下实际的行为。在 ListView 控件的可滚动和可回收行上下文中使用此类组件时，其问题可能会对用户体验造成毁灭性影响。
这很糟糕，因为它会导致在用户滚动时创建和销毁视图元素，这根本没有性能。
正确设置
xml
<ListView items="{{ myTitles }}" class="list-group" itemTemplateSelector="{{selectItemTemplate}}">
<ListView.itemTemplates>
<template key="onelayout">
<StackLayout backgroundColor="lightblue">
<Label text="{{ title }}" textWrap="true" class="title" />
</StackLayout>
</template>
<template key="anotherlayout">
<GridLayout rows="auto,5,auto,5,auto" backgroundColor="red">
<Label text="{{ title }}" textWrap="true" class="title" />
<Label row="2" text="Something Else" textWrap="true" class="title" />
<Label row="4" text="Could show yet anything thing here" textWrap="true" class="title" />
</GridLayout>
</template>
</ListView.itemTemplates>
</ListView>
// Using template selectors
selectItemTemplate(item, index, items) {
return item && item.showSomethingElse ? 'anotherlayout' : 'onelayout';
}使用模板选择器是 ListView 和 RadListView 支持的功能，在用户滚动时需要在行中进行条件布局时应始终使用。
- 下一步
- 简介
