.NET MAUI ListView嵌入FlexLayout高度异常,无法显示全部列表项
ListView在纵向FlexLayout中被截断无法滚动到底部的修复
当ListView置于纵向FlexLayout中时,会异常忽略Flex高度配置:它与其他控件的间距显示正常,但在空间不足时会截断ItemSource末尾的部分项。
示例截图



原布局代码
<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
相关产品推荐
相关产品推荐

