使用CollectionView制作自定义Action Sheet时如何实现尺寸自适应

出现CollectionView占满父容器剩余空间、无法根据内部子元素收缩高度的核心原因，是作为滚动控件的CollectionView默认会尽可能获取父容器分配的最大可用空间，配合默认的拉伸型布局行为，最终会撑满所有空闲区域。

核心配置步骤 #

• 为CollectionView设置正确的垂直布局选项
  给CollectionView添加VerticalOptions="Start"属性，替换默认的Fill拉伸行为，让CollectionView仅占据自身内容需要的高度，不额外抢占父容器的剩余空间。这是解决高度被拉满的最核心配置。
• 显式配置垂直方向的ItemsLayout
  不依赖框架默认的隐式布局推断，手动声明垂直方向的线性布局，避免自适应测量逻辑出现计算偏差，配置代码为：

  <CollectionView.ItemsLayout>
      <LinearItemsLayout Orientation="Vertical" />
  </CollectionView.ItemsLayout>
  

• 优化滚动相关配置
  滚动容器的原生设计逻辑是优先占满空间以支撑滚动交互，需要额外调整：
  • 设置VerticalScrollBarVisibility="Never"隐藏垂直滚动条，避免滚动条占位干扰高度计算
  • 如果Action Sheet的总内容高度始终小于屏幕可用高度，可在代码中为CollectionView关闭垂直滚动能力，进一步触发内容自适应测量逻辑
• 处理平台兼容的测量异常
  部分Android版本下CollectionView存在尺寸测量缓存的问题，可在ItemsSource绑定完成、所有内容渲染结束后，调用CollectionViewControl.InvalidateMeasure()手动触发一次尺寸重绘，确保高度计算结果与实际内容完全一致。
• 极端场景的兜底方案
  若上述配置后仍存在高度适配偏差，可在代码中动态计算总内容高度：累加Header实际测量高度、所有Item的总高度、Footer实际测量高度，将计算结果赋值给CollectionView的HeightRequest属性，实现精准匹配。

注意：如果CollectionView的父容器是垂直方向的ScrollView，上述配置依然生效，但需要避免将CollectionView的高度绑定为父容器的剩余空间，否则自适应逻辑会被覆盖。

修改后的完整代码 #

<?xml version="1.0" encoding="utf-8"?>
<StackLayout Margin="60, 0">
    <CollectionView
        BackgroundColor="White"
        x:Name="CollectionViewControl"
        VerticalOptions="Start"
        VerticalScrollBarVisibility="Never">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" />
        </CollectionView.ItemsLayout>

        <CollectionView.Header>
            <Label
                x:Name="HeaderLabel"
                TextTransform="Uppercase"
                HorizontalTextAlignment="Center"
                FontAttributes="Bold" />
        </CollectionView.Header>

        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="0, 10" x:DataType="modalDialogs:ActionSheetItem">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="8*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Label Text="{Binding Name}" />
                    <Image Grid.Column="1" Source="arrow_down" IsVisible="{Binding IsSelected}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>

        <CollectionView.Footer>
            <Button
                BackgroundColor="Transparent"
                TextColor="Green"
                Text="Cancel"
                HorizontalOptions="End" />
        </CollectionView.Footer>
    </CollectionView>
</StackLayout>

内容的提问来源于stack exchange，提问作者Вадим Литвин