Xamarin.Forms中如何实现支持水平和垂直滚动的ListView

嘿，我之前也折腾过这个需求，在Xamarin.Forms里搞定支持水平或垂直滚动的ListView其实没那么复杂，分几种场景给你拆解一下：

一、垂直滚动的ListView（默认行为） #

其实ListView默认就是垂直滚动的，只要你的列表内容高度超过了ListView的显示区域，就会自动触发垂直滚动。比如你可以这么写：

<ListView HeightRequest="300" ItemsSource="{Binding YourItemList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding ItemName}" Padding="10"/>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

只要YourItemList里的条目足够多，超过300的高度，就能自然垂直滚动了。

二、实现水平滚动的ListView #

ListView本身没有直接支持水平滚动的属性，所以我们需要通过**自定义渲染器（Custom Renderer）**来实现，针对Android和iOS分别处理：

Android端自定义渲染器 #

创建一个HorizontalListViewRenderer类：

using Android.Content;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(ListView), typeof(YourAppName.Droid.Renderers.HorizontalListViewRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class HorizontalListViewRenderer : ListViewRenderer
    {
        public HorizontalListViewRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 设置布局管理器为水平方向
                Control.LayoutManager = new LinearLayoutManager(Context, LinearLayoutManager.Horizontal, false);
            }
        }
    }
}

iOS端自定义渲染器 #

创建对应的iOS渲染器：

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(ListView), typeof(YourAppName.iOS.Renderers.HorizontalListViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class HorizontalListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 设置UITableView的滚动方向为水平
                Control.ScrollDirection = UITableViewScrollDirection.Horizontal;
                // 记得调整行高，适配水平布局
                Control.RowHeight = 100;
            }
        }
    }
}

注意：如果只想让特定的ListView实现水平滚动，可以自定义一个HorizontalListView继承自ListView，然后渲染器针对这个自定义类，避免影响所有ListView。

更简单的替代方案：使用CollectionView #

如果你用的是Xamarin.Forms 3.0及以上版本，CollectionView是更好的选择，它原生支持水平滚动，不需要写渲染器：

<CollectionView ItemsSource="{Binding YourItemList}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame WidthRequest="150" HeightRequest="100" Margin="5">
                <Label Text="{Binding ItemName}" HorizontalOptions="Center" VerticalOptions="Center"/>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

三、同时支持水平和垂直滚动 #

如果需要实现类似表格那种横向+纵向都能滚动的效果，ListView本身做不到单一控件同时支持双方向滚动，这时候可以用ScrollView嵌套的方式：

<ScrollView Orientation="Vertical">
    <ScrollView Orientation="Horizontal">
        <!-- 这里可以放ListView、CollectionView或者自定义的网格布局 -->
        <ListView ItemsSource="{Binding YourGridData}" WidthRequest="800">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Column1}" WidthRequest="200"/>
                            <Label Text="{Binding Column2}" WidthRequest="200"/>
                            <Label Text="{Binding Column3}" WidthRequest="200"/>
                            <Label Text="{Binding Column4}" WidthRequest="200"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollView>
</ScrollView>

外层垂直ScrollView处理纵向滚动，内层水平ScrollView处理横向滚动，这样就能实现双方向滚动的效果了。

内容的提问来源于stack exchange，提问作者sumit sisodia