如何在Xamarin中实现首列固定、其余列横向滚动的列表设计

一、可用组件/插件 #

• Syncfusion SfDataGrid：通过FrozenColumnCount="1"属性即可一键固定首列，支持横向滚动其余列，同时自动同步纵向滚动，适配Xamarin.Forms，功能完善且文档齐全。
• DevExpress DataGrid：设置FixedColumnCount="1"就能实现首列固定，自带多种样式定制和交互支持。
• 开源组件DataGridExt：基于Xamarin.Forms的扩展DataGrid，支持固定列功能，适合不想使用商业组件的场景。

二、手动实现方案（无插件） #

核心思路是将列表拆分为左侧固定列区域和右侧可横向滚动区域，同时保持两者纵向滚动同步：

1. 外层用Grid布局分两列，左列承载固定内容，右列用横向ScrollView包裹数据列表。
2. 监听两个列表的滚动事件，同步纵向滚动位置，确保左右内容对齐。

三、代码示例（手动实现） #

XAML代码 #

<Grid Grid.ColumnSpan="2" Grid.RowSpan="4">
    <!-- 表头区域 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- 表头 -->
    <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/> <!-- 固定首列宽度 -->
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 固定表头 -->
        <StackLayout Grid.Column="0" Padding="10" BackgroundColor="Gray" HorizontalOptions="Fill">
            <Label Text="List Header" FontSize="Small" TextColor="White" FontAttributes="Bold" />
        </StackLayout>

        <!-- 可横向滚动的表头 -->
        <ScrollView Grid.Column="1" Orientation="Horizontal">
            <StackLayout Orientation="Horizontal" Padding="10" Spacing="50" BackgroundColor="Gray">
                <Label Text="18:00" FontSize="Small" TextColor="White" FontAttributes="Bold" />
                <Label Text="18:30" FontSize="Small" TextColor="White" FontAttributes="Bold" />
                <Label Text="19:00" FontSize="Small" TextColor="White" FontAttributes="Bold" />
            </StackLayout>
        </ScrollView>
    </Grid>

    <!-- 内容区域 -->
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/> <!-- 固定首列宽度 -->
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 固定内容列 -->
        <ListView ItemsSource="{Binding DataTypes}" 
                  VerticalOptions="FillAndExpand"
                  SeparatorVisibility="None"
                  x:Name="FixedListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="10" BackgroundColor="#eee">
                            <Label Text="{Binding DataName}" TextColor="#f35e20" FontAttributes="Bold" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <!-- 可横向滚动的内容列 -->
        <ScrollView Grid.Column="1" Orientation="Horizontal">
            <ListView ItemsSource="{Binding DataTypes}" 
                      VerticalOptions="FillAndExpand"
                      SeparatorVisibility="None"
                      x:Name="ScrollableListView"
                      ItemTapped="DataType_Selected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" Padding="10" Spacing="50" BackgroundColor="#eee">
                                <Label Text="Avail" TextColor="Black" FontAttributes="Bold" />
                                <Label Text="Not" TextColor="Black" FontAttributes="Bold" />
                                <Label Text="Avail" TextColor="Black" FontAttributes="Bold" />
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </ScrollView>
    </Grid>
</Grid>

后台同步滚动代码 #

// 在页面构造函数或Loaded事件中添加滚动同步逻辑
FixedListView.Scrolled += (s, e) =>
{
    if (ScrollableListView.ScrollY != e.ScrollY)
    {
        ScrollableListView.ScrollToAsync(0, e.ScrollY, false);
    }
};

ScrollableListView.Scrolled += (s, e) =>
{
    if (FixedListView.ScrollY != e.ScrollY)
    {
        FixedListView.ScrollToAsync(0, e.ScrollY, false);
    }
};

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