为什么我的 ListView Items 会自动变白？

问题描述

所以我正在开发一个应用程序，该应用程序将在 ListView 中显示大约 25 个项目。当应用程序加载时，前三个项目加载得很好，但第四个项目和其他一些项目是完全白色的，甚至没有变成它应该的颜色。如果我在列表中向下滚动并备份几次，它们都会变成白色，并且永远不会恢复到原来的颜色。为什么会这样，我该怎么做才能防止这种情况发生？我应该使用不同的控件来显示项目吗？

我已将一些属性设置为空字符串，因为我不想将这些数据共享给公众。这样做根本不会影响示例，绑定可以正常工作。

这就是它的样子

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewmodel="clr-namespace:MaterialDesign.MVVM.viewmodel"
             x:Class="MaterialDesign.MainPage">
    <ContentPage.BindingContext>
        <viewmodel:Homeviewmodel/>
    </ContentPage.BindingContext>

    <StackLayout Background="#282828">

        <ListView ItemsSource="{Binding Items}"
                  HasUnevenRows="True"
                  Margin="0,10,0">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>

                        <Frame Background="#302E2E"
                               Margin="10,20"
                               Padding="0"
                               CornerRadius="4">
                            <StackLayout>
                                <Image HeightRequest="200"
                                       Source="{Binding ThePicture}"
                                       Aspect="Fill"
                                       IsAnimationPlaying="True"/>

                                <StackLayout Margin="10">

                                    <Label Text="{Binding Name}"
                                           TextColor="#F9F9F9"
                                           FontFamily="RobotoRegular"
                                           Margin="5,0"/>

                                    <Label Text="{Binding Name}"
                                           TextColor="#F9F9F9"
                                           FontFamily="RobotoRegular"
                                           Margin="5,0"/>

                                    <Label Text="{Binding Name}"
                                           FontFamily="RobotoMedium"
                                           FontSize="20"
                                           TextColor="#F9F9F9"
                                           Margin="5,0"/>

                                    <Label Text="{Binding Name}"
                                           TextColor="#929292"
                                           FontFamily="RobotoRegular"
                                           Margin="5,0"/>

                                    <FlexLayout BindableLayout.ItemsSource="{Binding Names}"
                                                BindableLayout.ItemTemplate="{StaticResource T}"
                                                Wrap="Wrap"
                                                Direction="row"
                                                FlowDirection="LeftToRight"
                                                AlignItems="Start"
                                                AlignContent="Start"
                                                Padding="0"
                                                Margin="0">

                                    </FlexLayout>
                                </StackLayout>
                            </StackLayout>
                        </Frame>

                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

解决方法

不要使用框架控件。

用 https://github.com/sthewissen/Xamarin.Forms.PancakeView

试试下面的代码

xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"


<yummy:PancakeView
            Background="#302E2E"
                           Margin="10,10,20"
                           Padding="0"
                           CornerRadius="4">
            <StackLayout>
                            <Image HeightRequest="200"
                                   Source="{Binding ThePicture}"
                                   Aspect="Fill"
                                   IsAnimationPlaying="True"/>

                            <StackLayout Margin="10">

                                <Label Text="{Binding Name}"
                                       TextColor="#F9F9F9"
                                       FontFamily="RobotoRegular"
                                       Margin="5,0"/>

                                <Label Text="{Binding Name}"
                                       TextColor="#F9F9F9"
                                       FontFamily="RobotoRegular"
                                       Margin="5,0"/>

                                <Label Text="{Binding Name}"
                                       FontFamily="RobotoMedium"
                                       FontSize="20"
                                       TextColor="#F9F9F9"
                                       Margin="5,0"/>

                                <Label Text="{Binding Name}"
                                       TextColor="#929292"
                                       FontFamily="RobotoRegular"
                                       Margin="5,0"/>

                                <FlexLayout BindableLayout.ItemsSource="{Binding Names}"
                                            BindableLayout.ItemTemplate="{StaticResource T}"
                                            Wrap="Wrap"
                                            Direction="row"
                                            FlowDirection="LeftToRight"
                                            AlignItems="Start"
                                            AlignContent="Start"
                                            Padding="0"
                                            Margin="0">

                                </FlexLayout>
                            </StackLayout>
                        </StackLayout>
        </yummy:PancakeView>

,

您可以只使用 ListView 作为中继器。您不需要 ListView 的开销。您可以阅读更多here

<StackLayout BindableLayout.ItemsSource="{Binding Items}"
             Margin="0,0">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame Background="#302E2E"
                   Margin="10,20"
                   Padding="0"
                   CornerRadius="4">
                <StackLayout>
                    <Image HeightRequest="200"
                           Source="{Binding ThePicture}"
                           Aspect="Fill"
                           IsAnimationPlaying="True"/>

                    <StackLayout Margin="10">

                        <Label Text="{Binding Name}"
                               TextColor="#F9F9F9"
                               FontFamily="RobotoRegular"
                               Margin="5,0"/>

                        <Label Text="{Binding Name}"
                               TextColor="#F9F9F9"
                               FontFamily="RobotoRegular"
                               Margin="5,0"/>

                         <Label Text="{Binding Name}"
                                FontFamily="RobotoMedium"
                                FontSize="20"
                                TextColor="#F9F9F9"
                                Margin="5,0"/>

                        <Label Text="{Binding Name}"
                               FontFamily="RobotoMedium"
                               FontSize="20"
                               TextColor="#F9F9F9"
                               Margin="5,0"/>

                        <Label Text="{Binding Name}"
                               TextColor="#929292"
                               FontFamily="RobotoRegular"
                               Margin="5,0"/>

                        <FlexLayout BindableLayout.ItemsSource="{Binding Names}"
                                    BindableLayout.ItemTemplate="{StaticResource T}"
                                   Wrap="Wrap"
                                   Direction="row"
                                   FlowDirection="LeftToRight"
                                   AlignItems="Start"
                                   AlignContent="Start"
                                   Padding="0"
                                   Margin="0">

                        </FlexLayout>
                    </StackLayout>
                </StackLayout>
            </Frame>
         </DataTemplate>
    </BindableLayout.ItemTemplate>
 </StackLayout>