如何消除Xamarin Forms中ListView之间的布局间隙？

嘿，我来帮你搞定这个间隙问题！在Xamarin.Forms里，多个ListView在StackLayout中出现间隙通常是几个默认组件设置导致的，咱们一步步来修复：

可能的原因&对应解决方案 #

1. 外层StackLayout的默认间距 #

StackLayout默认会给子元素之间添加固定间距（默认值一般为6），这是最常见的间隙来源。你只需要给外层的StackLayout加上Spacing="0"，就能消除子元素之间的默认空白。

2. ListView自带的默认内边距/外边距 #

不同平台的ListView组件默认会带有一些内边距（Padding）或者外边距（Margin），比如iOS上的ListView顶部和底部会有默认空白。咱们需要手动给每个ListView设置Padding="0"和Margin="0"，覆盖系统默认值。

3. ListView的默认Header/Footer空白 #

有些情况下，ListView即使没显式设置Header/Footer，也会预留一小段空白空间。可以通过设置Header=""和Footer=""来彻底清除这个隐藏空白。

修改后的完整代码 #

下面是调整后的代码，我把关键修改的地方用注释标出来了：

<Grid>
    <ScrollView>
        <!-- 给外层StackLayout设置Spacing="0"，消除子元素默认间距 -->
        <StackLayout Spacing="0">
            <!-- 设置ListView的Padding、Margin，以及空Header/Footer清除隐藏空白 -->
            <ListView HasUnevenRows="True" SeparatorColor="Red" ItemsSource="{Binding GetAssignedTask}"
                      Padding="0" Margin="0" Header="" Footer="">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" BackgroundColor="White">
                                <Image Source="rsz_pnglogocom.png" />
                                <StackLayout>
                                    <Label Text="Task 1" TextColor="Black" FontSize="Medium" />
                                    <StackLayout Orientation="Horizontal">
                                        <Label Margin="0,0,70,0" Text="{Binding dtStart,StringFormat='{0:MMMM dd, yyyy}'}" TextColor="Red" HorizontalOptions="Center"/>
                                        <Label Text="Waqas" TextColor="Black" HorizontalOptions="End"/>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <!-- 给中间的StackLayout设置Margin/Padding，确保和上下ListView紧密贴合 -->
            <StackLayout Margin="0" Padding="0">
                <Label Text="test"/>
            </StackLayout>

            <!-- 同样设置第二个ListView的Padding、Margin、Header/Footer -->
            <ListView HasUnevenRows="True" SeparatorColor="Red" ItemsSource="{Binding GetAssignedTask}"
                      Padding="0" Margin="0" Header="" Footer="">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal" BackgroundColor="LightPink">
                                <Image Source="rsz_pnglogocom.png" />
                                <StackLayout>
                                    <Label Text="Task 1" TextColor="Black" FontSize="Medium" />
                                    <StackLayout Orientation="Horizontal">
                                        <Label Margin="0,0,70,0" Text="{Binding dtStart,StringFormat='{0:MMMM dd, yyyy}'}" TextColor="Red" HorizontalOptions="Center"/>
                                        <Label Text="Waqas" TextColor="Black" HorizontalOptions="End"/>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </ScrollView>
</Grid>

额外提示 #

如果做完上面的修改还是存在细微间隙，可以检查一下ViewCell内部的布局有没有设置多余的Margin/Padding——不过从你的代码来看这部分应该没问题。另外，不同平台的渲染差异可能导致极少量空白，这时候可以用平台专属设置（PlatformSpecific）进一步调整，但上面的步骤已经能解决绝大多数场景的间隙问题啦！

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