第十九章:集合视图(八)

简介:

定制单元格
其中一个派生自Cell的类名为ViewCell,它定义了一个名为View的属性,允许您为ListView中的项目显示定义自定义可视树。
有几种方法可以定义自定义单元格,但有些方法不如其他方法。也许最大量的工作涉及模仿现有的Cell类,它根本不涉及ViewCell,而是要求您创建特定于平台的单元格渲染器。您也可以得到来自ViewCell类,定义类似于TextCell的绑定属性和其他细胞衍生工具类的几个可绑定属性,并定义可视树在任一XAML或代码的单元格,就像你会为一个做从ContentView派生的自定义视图。然后,您可以像在TextCell中一样在代码或XAML中使用该自定义单元格。
如果要完全在代码中完成工作,可以将DataTemplate构造函数与Func参数一起使用,并在请求每个项目时在代码中构建可视化树。此方法允许您在构建可视树时定义数据绑定,而不是在DataTemplate上设置绑定。
但当然最简单的方法是在ListView元素中的XAML中定义可视树和单元格的绑定。 CustomNamedColorList程序演示了这种技术。一切都在XAML文件中:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit=
                 "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
             x:Class="CustomNamedColorList.CustomNamedColorListPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="10, 20, 10, 0"
                    Android="10, 0"
                    WinPhone="10, 0" />
    </ContentPage.Padding>
    <ListView SeparatorVisibility="None"
              ItemsSource="{x:Static toolkit:NamedColor.All}">
        <ListView.RowHeight>
            <OnPlatform x:TypeArguments="x:Int32"
                        iOS="80"
                        Android="80"
                        WinPhone="90" />
        </ListView.RowHeight>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ContentView Padding="5">
                        <Frame OutlineColor="Accent"
                               Padding="10">
                            <StackLayout Orientation="Horizontal">
                                <BoxView x:Name="boxView"
                                         Color="{Binding Color}"
                                         WidthRequest="50"
                                         HeightRequest="50" />
                                <StackLayout>
                                    <Label Text="{Binding FriendlyName}"
                                           FontSize="22"
                                           VerticalOptions="StartAndExpand" />
                                    <Label Text="{Binding RgbDisplay, StringFormat='RGB = {0}'}"
                                           FontSize="16"
                                           VerticalOptions="CenterAndExpand" />
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </ContentView>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

在DataTemplate中,property-element标签是ViewCell。 ViewCell的content属性是View,因此您不需要ViewCell.View标记。 相反,ViewCell标记内的可视树隐式设置为View属性。 可视树以ContentView开始,添加一个小填充,然后是一个Frame和一对嵌套的StackLayout元素,带有BoxView和两个Label元素。 当ListView呈现其项目时,每个显示项目的BindingContext是项目本身,因此Binding标记扩展通常非常简单。
请注意,ListView的RowHeight属性设置为依赖于平台的值的属性元素标记。 这些值是通过试验和错误凭经验获得的,并产生以下显示:
2018_10_26_092207
在本书中,您已经看到了几个可滚动的颜色列表,例如第4章“滚动堆栈”中的ColorBlocks程序和第8章“代码和XAML协调”中的ColorViewList程序,但我想你会 同意这是解决问题的最优雅方案。
显式设置ListView的RowHeight属性是设置行高的两种方法之一。 您可以通过删除RowHeight设置并将HasUnevenRows属性设置为True来尝试其他方法。 这是CustomNamedColorList程序的变体:

<ListView SeparatorVisibility="None"
          ItemsSource="{x:Static toolkit:NamedColor.All}"
          HasUnevenRows="True">
    <ListView.ItemTemplate>
        __
    </ListView.ItemTemplate>
</ListView>

HasUnevenRows属性专门用于处理ListView中单元格高度不均匀的情况。 但是,您也可以将它用于所有单元格高度相同但您不确切知道该高度的情况。 使用此设置,将根据可视树计算各行的高度,并使用该高度来分隔行。 在此示例中,单元格的高度由两个Label元素的高度控制。 这些行与从RowHeight属性显式设置的高度略有不同:
2018_10_26_092515
尽管HasUnevenRows属性似乎提供了一种比RowHeight更容易调整单元格高度的方法,但它确实会有性能损失,除非您需要,否则应该避免使用它。
但是对于iOS和Android,在定义自定义单元格时必须使用这两个属性中的一个或另一个。 以下是未设置任何属性时发生的情况:
2018_10_26_092708
只有Windows平台自动使用可视树的渲染大小来确定行高。
总之,为获得最佳ListView性能,请使用其中一个预定义的Cell类。 如果不能,请使用ViewCell并定义自己的可视树。 尽力使用ViewCell提供特定的RowHeight属性设置。 仅在无法使用时才使用HasUnevenRows。

目录
相关文章
|
1月前
|
PHP 开发者
PHP类型声明:让你的代码更健壮
PHP类型声明:让你的代码更健壮
216 108
|
5天前
|
弹性计算 缓存 网络协议
阿里云u2i实例——企业上云第一台云服务器,通用算力型ECS费用价格整理
阿里云ECS通用算力型u2i实例,企业入门首选,搭载Intel Xeon Platinum处理器,2核4G仅640元/年,4核8G仅1170元/年,低至2.5折,开发测试成本直降75%,助力中小企业高效上云。
173 90
|
6天前
|
API PHP 数据库
解锁PHP数组的强大威力:超越基础遍历
解锁PHP数组的强大威力:超越基础遍历
|
16天前
|
运维 算法 数据可视化
基于MATLAB的自然图像梯度分布重尾特性验证方案
基于MATLAB的自然图像梯度分布重尾特性验证方案
|
17天前
|
机器学习/深度学习 人工智能 算法
生成式人工智能算法备案的背景及发展趋势V3.0 20251029更新
本文记录作者两年来亲历算法备案政策 evolution,从2023年ChatGPT引发AIGC热潮,到2025年备案趋严、审核升级,展现我国AI监管由“增量”转向“提质”的全过程。揭示AI发展需合规护航,备案已成产品上线刚需,未来门槛将更高,草根入局愈发艰难。
生成式人工智能算法备案的背景及发展趋势V3.0 20251029更新
|
3天前
|
数据采集 存储 监控
避开 Playwright 常见陷阱,让你的 UI 测试更加快速与稳定
本文适合正在使用或准备使用 Playwright 做自动化测试的朋友,帮助你避开踩坑,提高测试效率。
|
6天前
|
存储 Kubernetes Docker
部署eck收集日志到k8s
本文介绍基于ECK(Elastic Cloud on Kubernetes)在K8s中部署Elasticsearch、Kibana和Filebeat的完整流程。采用Helm方式部署ECK Operator,通过自定义YAML文件分别部署ES集群、Kibana及Filebeat,并实现日志采集与可视化。重点涵盖命名空间一致性、版本匹配、HTTPS配置禁用、资源限制、存储挂载及权限RBAC设置,支持系统日志、应用日志与容器日志的多源采集,适用于生产环境日志系统搭建。
313 94
|
7天前
|
人工智能 自然语言处理 算法
2025年第13批中国深度合成算法备案分析报告
2025年9月,第13批深度合成算法备案公布,共586项,累计达4420项。北京、广东、浙江、上海居前列,民企为主力,覆盖教育、医疗、金融等领域。文本与对话生成占主导,数字人、多模态技术加速落地。AI应用向行业纵深发展,合规标识成常态,监管趋严推动产业规范创新。
|
13天前
|
传感器 机器学习/深度学习 监控
当“数据”下田:用算力种出全球的饭碗
当“数据”下田:用算力种出全球的饭碗
140 74