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

.NET MAUI ListView嵌入FlexLayout高度异常,无法显示全部列表项

ListView在纵向FlexLayout中被截断无法滚动到底部的修复

当ListView置于纵向FlexLayout中时,会异常忽略Flex高度配置:它与其他控件的间距显示正常,但在空间不足时会截断ItemSource末尾的部分项。

示例截图

示例截图1
示例截图2
示例截图3

原布局代码

<FlexLayout FlexLayout.Grow="1"
            Direction="Column"
            JustifyContent="Start"
            AlignContent="Start">
    <Label Text="This is spaced correctly"
           FlexLayout.Shrink="0"/>
    <ListView x:Name="MessagesListView"
              ItemsSource="{Binding Messages}"
              HasUnevenRows="True"
              FlexLayout.Grow="0"
              FlexLayout.Shrink="1">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Content}"
                          Detail="{Binding FromUserName}"
                          DetailColor="Aquamarine"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Label Text="This is spaced correctly"
           FlexLayout.Shrink="0"/>
</FlexLayout>

问题分析

原代码中给ListView设置了FlexLayout.Grow="0",这意味着ListView不会主动扩展占据FlexLayout中的剩余可用空间;同时FlexLayout.Shrink="1"允许ListView在空间不足时被压缩,最终导致ListView可视区域不足以显示所有列表项,且无法滚动到底部。

修复方案

将ListView的FlexLayout.Grow属性设置为1,移除FlexLayout.Shrink="1",让ListView占据FlexLayout中除固定高度控件外的所有剩余空间,这样ListView就能获得足够高度渲染完整滚动区域:

<FlexLayout FlexLayout.Grow="1"
            Direction="Column"
            JustifyContent="Start"
            AlignContent="Start">
    <Label Text="This is spaced correctly"
           FlexLayout.Shrink="0"/>
    <ListView x:Name="MessagesListView"
              ItemsSource="{Binding Messages}"
              HasUnevenRows="True"
              FlexLayout.Grow="1">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextCell Text="{Binding Content}"
                          Detail="{Binding FromUserName}"
                          DetailColor="Aquamarine"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
    <Label Text="This is spaced correctly"
           FlexLayout.Shrink="0"/>
</FlexLayout>

修改后,ListView会自动填充FlexLayout的剩余空间,所有列表项都能通过滚动完整查看。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.07 11:40:24