.NET MAUI布局适配：如何避免用绝对数值设置CollectionView高度？

你完全可以通过布局容器的自动空间分配能力替代SizeChanged事件里的硬编码逻辑，以下是几种可靠的方案：

使用Grid布局（最推荐） #

Grid是处理复杂空间分配的最佳选择，通过行定义可以精准控制各元素的占比：把顶部需要固定高度的区域设为Auto（自动适应内容高度）或固定值，让CollectionView所在行占满剩余空间（用*表示）。这样无论屏幕尺寸如何变化，CollectionView都会自动填充剩余空间，具备滚动能力。

示例代码：

<Border x:Name="InnerBorder">
    <Grid>
        <Grid.RowDefinitions>
            <!-- 顶部区域：自动适应内容高度，或设固定值替代原来的110 -->
            <RowDefinition Height="Auto"/>
            <!-- CollectionView占满剩余所有空间 -->
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 顶部固定内容（比如标题栏、操作按钮组） -->
        <StackLayout Grid.Row="0" BackgroundColor="#f0f0f0">
            <!-- 你的顶部控件，无需硬编码总高度，Grid会自动计算 -->
            <Label Text="顶部标题" Margin="10"/>
            <Button Text="操作按钮" Margin="10"/>
        </StackLayout>

        <!-- CollectionView自动填充剩余空间，自带滚动能力 -->
        <CollectionView x:Name="InnerCollectionView" Grid.Row="1">
            <CollectionView.ItemTemplate>
                <!-- 你的Item模板 -->
                <DataTemplate>
                    <Label Text="{Binding}" Margin="10"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</Border>

如果顶部区域必须是固定高度，也可以把RowDefinition的Height设为具体数值，比如110，但优先用Auto适配内容，避免不必要的硬编码。

使用VerticalStackLayout结合FillAndExpand #

如果布局结构是简单的垂直堆叠，给CollectionView设置VerticalOptions="FillAndExpand"，同时确保父容器的VerticalOptions为Fill（默认通常已满足），就能让CollectionView自动占满剩余空间。

示例代码：

<Border x:Name="InnerBorder" VerticalOptions="Fill">
    <VerticalStackLayout>
        <!-- 顶部固定高度区域 -->
        <StackLayout HeightRequest="110" BackgroundColor="#f0f0f0">
            <Label Text="顶部内容" Margin="10"/>
        </StackLayout>

        <!-- 自动填充剩余空间 -->
        <CollectionView x:Name="InnerCollectionView" VerticalOptions="FillAndExpand">
            <!-- CollectionView内容 -->
        </CollectionView>
    </VerticalStackLayout>
</Border>

额外优化建议 #

• 避免固定像素值：如果必须设置固定高度，优先用OnPlatform/OnIdiom根据设备类型调整，比如：

  <StackLayout>
      <StackLayout.HeightRequest>
          <OnPlatform x:TypeArguments="x:Double">
              <On Platform="iOS" Value="100"/>
              <On Platform="Android" Value="120"/>
          </OnPlatform>
      </StackLayout.HeightRequest>
  </StackLayout>
  

• 统一维护尺寸：把常用高度定义在资源字典里（比如App.xaml），方便后续统一修改：

  <ResourceDictionary>
      <x:Double x:Key="TopFixedHeight">110</x:Double>
  </ResourceDictionary>
  

  布局中引用：HeightRequest="{StaticResource TopFixedHeight}"

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