如何提高Xamarin表单中列表视图的性能

我正在尝试实现列表视图，其中有水平滚动视图。

我的代码如下。

型号

public class Community
{
public string CommunityName { get; set; }
public string Population { get; set; }
public IEnumerable<Person> Persons { get; set; }
}
public class Person
{
public string Name { get; set; }
public string City { get; set; }
}

ViewModel

public class ListViewPageModel
{
#region Properties
public List<Community> CommunitiesList { get; set; }
#endregion
#region Ctor
public ListViewPageModel()
{
CommunitiesList = GetItems().ToList();
}
#endregion
#region Methods
private IEnumerable<Community> GetItems()
{
var list = new List<Community>()
{
new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},
new Community()
{
CommunityName = "Community 2",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
}
},
new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},
new Community()
{
CommunityName = "Community 3",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Chennai"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Lucknow"},
new Person() { Name = "Person8" , City= "Gangtok"},
new Person() { Name = "Person9" , City= "Hyderabad"}
}
},
new Community()
{
CommunityName = "Community 4",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Gangtok"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Lucknow"},
new Person() { Name = "Person8" , City= "Hyderabad"},
}
},
new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},
new Community()
{
CommunityName = "Community 5",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Gangtok"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
}
},new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
},new Community()
{
CommunityName = "Community 1",Population = "1000",
Persons = new List<Person>()
{
new Person() { Name = "Person1" , City= "Hyderabad"},
new Person() { Name = "Person2" , City= "Banagalore"},
new Person() { Name = "Person3" , City= "Hyderabad"},
new Person() { Name = "Person4" , City= "Chennai"},
new Person() { Name = "Person5" , City= "Hyderabad"},
new Person() { Name = "Person6" , City= "Gangtok"},
new Person() { Name = "Person7" , City= "Hyderabad"}
}
}
};
return list;
}
#endregion
}

listview.xaml

<ListView ItemsSource="{Binding CommunitiesList}"
HasUnevenRows="True"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5">
<Grid BackgroundColor="White" Padding="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label  Text="{Binding CommunityName}"/>
<Label  Grid.Row="1"  Text="{Binding Population}" />
<ScrollView Grid.Row="2"
Orientation="Horizontal">
<StackLayout Orientation="Horizontal"
BindableLayout.ItemsSource="{Binding Persons}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="Aqua"
CornerRadius="10">
<StackLayout  Spacing="0" >
<Label Text="{Binding Name}" TextColor="#bc5c29"/>
<Label Text="{Binding City}" TextColor="Gray" />
</StackLayout>
</Frame>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>

</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

这是我想要的可视化，但滚动时出现了问题。

第一次它倾向于滞后，但之后它就可以了。

我在列表视图中尝试了CachingStrategy中的所有属性。

如果我使用recycle元素，它在每次滚动时都会缺少。

我尝试使用收藏视图而不是滚动view。

我该如何避免这种缺失？

public enum ListViewCachingStrategy
{
RetainElement,   // the default value
RecycleElement,
RecycleElementAndDataTemplate
}

RetainElement缓存策略指定ListView将为列表中的每个项生成一个单元格，这是ListView的默认行为。应在以下情况下使用：

每个单元格都有大量绑定。

单元格模板经常更改。

测试表明，RecycleElement缓存策略会降低执行速度

使用自定义单元格时，必须认识到RetainElement缓存策略的后果。每个单元创建都需要运行任何单元初始化代码，这可能是每秒多次。在这种情况下，页面上良好的布局技术，如使用多个嵌套的StackLayout实例，在用户滚动时实时设置和销毁时，会成为性能瓶颈。

RecycleElement缓存策略指定ListView将尝试通过回收列表单元格来最小化其内存占用和执行速度。这种模式并不总是提供性能改进，应该进行测试以确定任何改进。然而，它是首选，应该在以下情况下使用：

每个单元格都有少量到中等数量的绑定。

每个单元格的BindingContext定义所有单元格数据。

每个单元格基本相似，单元格模板不变。

相关内容

最新更新

热门标签：