You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

CollectionView显示EmptyView时Header自动隐藏的问题求助

解决CollectionView显示EmptyView时Header消失的问题

问题分析

核心原因是MAUI CollectionView的默认行为:当控件显示EmptyView时,会自动隐藏Header和Footer。首次加载正常是因为初始状态下EmptyView未触发,后续操作触发EmptyView后Header被隐藏,且后续加载内容时控件未正确恢复Header的显示状态。

解决方案

最直接可靠的方法是将Header从CollectionView内部移到外部容器中,让Header的显示完全独立于CollectionView的EmptyView状态。

修改后的代码如下:

<RefreshView
    Command="{Binding LoadMoreNoticiasCommand}"
    IsRefreshing="{Binding IsRefreshing}">
    <!-- 新增外层VerticalStackLayout,包裹Header和CollectionView -->
    <VerticalStackLayout>
        <!-- 原CollectionView.Header内容移至此处 -->
        <VerticalStackLayout>
            <VerticalStackLayout.Padding>
                <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="Android" Value="0,80,0,0"/>
                    <On Platform="iOS" Value="0,80,0,0"/>
                    <On Platform="UWP" Value="0,80,0,0"/>
                </OnPlatform>
            </VerticalStackLayout.Padding>
            <Label Padding="20,0" Text="{Binding Title}" FontSize="10" FontAttributes="Bold"/>
        </VerticalStackLayout>

        <CollectionView ItemsSource="{Binding News}" RemainingItemsThreshold="5" RemainingItemsThresholdReachedCommand="{Binding GetNextDataCommand}">
            <!-- 移除原CollectionView.Header节点 -->
            
            <CollectionView.EmptyView>
                <!-- 保留原EmptyView内容 -->
                <VerticalStackLayout>
                    <ActivityIndicator IsRunning="True" IsVisible="False" Color="{x:StaticResource AuditBlue}" ZIndex="50" BackgroundColor="Yellow" VerticalOptions="Start">
                        <ActivityIndicator.Triggers>
                            <DataTrigger TargetType="ActivityIndicator" Binding="{Binding IsLoading}" Value="True">
                                <Setter Property="IsVisible" Value="True"/>
                                <Setter Property="IsRunning" Value="True"/>
                            </DataTrigger>
                            <DataTrigger TargetType="ActivityIndicator" Binding="{Binding IsLoading}" Value="False">
                                <Setter Property="IsVisible" Value="False"/>
                                <Setter Property="IsRunning" Value="False"/>
                            </DataTrigger>
                        </ActivityIndicator.Triggers>
                    </ActivityIndicator>

                    <VerticalStackLayout IsVisible="False">
                        <VerticalStackLayout IsVisible="False">
                            <Image Source="looking_for_news.png" Margin="100,100,100,20"/>
                            <Label Text="No se han encontrado coincidencias" HorizontalTextAlignment="Center"/>

                            <VerticalStackLayout.Triggers>
                                <DataTrigger TargetType="VerticalStackLayout" Binding="{Binding Status, StringFormat='{0}'}" Value="{x:Static utils:ConstantsFile.STATE_NOT_FOUND}">
                                    <Setter Property="IsVisible" Value="True"/>
                                </DataTrigger>
                            </VerticalStackLayout.Triggers>
                        </VerticalStackLayout>

                        <VerticalStackLayout IsVisible="False">
                            <Image Source="error_server.png" Margin="100,100,100,20"/>
                            <Label Text="Ups.. Parece que algo no ha ido como debería." HorizontalTextAlignment="Center"/>

                            <VerticalStackLayout.Triggers>
                                <DataTrigger TargetType="VerticalStackLayout" Binding="{Binding Status, StringFormat='{0}'}" Value="{x:Static utils:ConstantsFile.STATE_SERVER_ERROR}">
                                    <Setter Property="IsVisible" Value="True"/>
                                </DataTrigger>
                            </VerticalStackLayout.Triggers>
                        </VerticalStackLayout>

                        <VerticalStackLayout.Triggers>
                            <DataTrigger TargetType="VerticalStackLayout" Binding="{Binding IsLoading}" Value="False">
                                <Setter Property="IsVisible" Value="True"/>
                            </DataTrigger>
                        </VerticalStackLayout.Triggers>
                    </VerticalStackLayout>
                </VerticalStackLayout>
            </CollectionView.EmptyView>

            <CollectionView.FooterTemplate>
                <!-- 保留原FooterTemplate内容 -->
                <DataTemplate>
                    <VerticalStackLayout
                            HorizontalOptions="Fill" 
                            Padding="10"
                            VerticalOptions="Fill">
                        <ActivityIndicator
                                IsRunning="{Binding MoreNewsLoading,Source={RelativeSource AncestorType={x:Type ModelPages:HomeViewModel}}}"
                                IsVisible="{Binding MoreNewsLoading,Source={RelativeSource AncestorType={x:Type ModelPages:HomeViewModel}}}" 
                                Color="{x:StaticResource AuditBlue}"/>
                    </VerticalStackLayout>
                </DataTemplate>
            </CollectionView.FooterTemplate>

            <CollectionView.ItemTemplate>
                <!-- 保留原ItemTemplate内容 -->
                <DataTemplate x:DataType="Models:New">
                    <components:SingleCardNewComponent Noticia="{Binding .}"/>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</RefreshView>

其他可选方案(不推荐)

如果坚持使用CollectionView的Header属性,可通过自定义转换器+触发器强制控制Header可见性,但稳定性不如外层容器方案:

<CollectionView.Header>
    <VerticalStackLayout>
        <!-- 原Header内容 -->
        <VerticalStackLayout.Triggers>
            <DataTrigger TargetType="VerticalStackLayout" Binding="{Binding News, Converter={StaticResource IsNullOrEmptyConverter}}" Value="True">
                <Setter Property="IsVisible" Value="True"/>
            </DataTrigger>
        </VerticalStackLayout.Triggers>
    </VerticalStackLayout>
</CollectionView.Header>

需自定义IsNullOrEmptyConverter判断ItemsSource是否为空,强制Header在EmptyView显示时保持可见。

内容的提问来源于stack exchange,提问作者David Picazo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 02:52:33