首页 > 解决方案 > Xamarin Forms Android Paddings 未在 CollectionView 中显示

问题描述

我们在 Xamarin Forms 中观察到 CollectionView 的一个奇怪问题,我们无法解释。首先,我们使用 ListView 创建了一个动态视图,但是某些或我们的视图单元格正在动态改变高度,这并不是 Listview 真正支持的。所以我们切换到一个 CollectionView 应该更自然地支持它。使用 listview 我们没有这个填充问题;但由于内存重用,更多的随机崩溃。

我们正在使用带有模板选择器的 Collection-view 来动态加载不同的数据模板以创建 LIST。这些数据模板的高度和功能可能不同。

目前,我们观察到填充没有应用于 android 或不正确,或者看起来像一些缩放问题,因为它看起来也像是内容超出了界限。它只发生在这个 collectionView 的所有其他视图中,填充在 Android 和 iOS 上都是正确的。它发生在所有数据模板中,而不仅仅是本节。

下面有两张截图,一张iOS,一张Android。这显示了 CollectionView 的结果,其中两个相同类型的项目位于彼此下方。

第一个具有正确输出的 iOS:

在 iOS 上显示的填充

第二个安卓;这看起来很奇怪:

填充未在 Android 上显示

此特定数据模板的代码:

<DataTemplate x:Key="SectionTemplate">
        <ContentView Padding="0, 4, 0, 0" BackgroundColor="Red">
            <Grid Padding="8, 0, 17, 0" BackgroundColor="White">
            <Grid.HeightRequest>
                <OnIdiom x:TypeArguments="x:Double" Phone="50" Tablet="54.5"/>
            </Grid.HeightRequest>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="15"/>
            </Grid.ColumnDefinitions>
            <uikit:Label Grid.Column="0" StyleClass="SectionTitle" HorizontalTextAlignment="Start" Text="{Binding Name}" VerticalOptions="Center" VerticalTextAlignment="Center" />
            <uikit:Label Grid.Column="1" StyleClass="FoldButton" Text="{Binding FoldText}" TextColor="{StaticResource LightGreyFont}" FontAttributes="Bold" HorizontalOptions="CenterAndExpand" VerticalOptions="Center"/>
            <Grid.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding FoldCommand}" />
            </Grid.GestureRecognizers>
        </Grid>
        </ContentView>
    </DataTemplate>

加载 CollectionView 的视图代码:

<?xml version="1.0" encoding="UTF-8" ?>
<view:ProductView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:view="clr-namespace:Forms.Pages;assembly=Product.Forms"
    xmlns:vm="clr-namespace:Forms.BLL.ViewModels.ItemDetail"
    xmlns:datatemplates="clr-namespace:Forms.Resources.Templates"
    xmlns:templateselectors="clr-namespace:Forms.Helpers.DataTemplates"
    xmlns:converters="clr-namespace:Forms.Converters;assembly=Product.Forms"
    x:Class="Forms.Pages.Detail.Item.ItemDetailView"
    VerticalOptions="FillAndExpand"
    HorizontalOptions="FillAndExpand">
    <view:ProductView.BindingContext>
        <vm:ItemDetailViewModel />
    </view:ProductView.BindingContext>
    <view:ProductView.Resources>
        <ResourceDictionary>
           <!-- All Template items -->
        </ResourceDictionary>
    </view:ProductView.Resources>
    <view:ProductView.Content>
        <AbsoluteLayout BackgroundColor="{ StaticResource LightGreyBackground }" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <ActivityIndicator AbsoluteLayout.LayoutFlags="SizeProportional"
                               AbsoluteLayout.LayoutBounds="0,0,1,1"
                               Color="{StaticResource PendingBlue}"
                               VerticalOptions="Center"
                               IsVisible="{Binding IsLoading}"
                               IsRunning="{Binding IsLoading}" />                
            <CollectionView 
                      ItemsSource="{Binding ElementRows}"
                      BackgroundColor="Transparent"
                      ItemTemplate="{StaticResource ItemDetailTemplate}"
                      SelectionMode="None"
                      VerticalOptions="FillAndExpand"
                      HorizontalOptions="FillAndExpand">
            </CollectionView>
        </AbsoluteLayout>
    </view:ProductView.Content>
</view:ProductView>

我们尝试将 ItemSizingStrategy 设置为“MeasureAllItems”,将 ItemsLayout 的间距设置为 0,并移除其周围的 AbsoluteLayout。设置 ContentViews 的垂直和水平选项。这一切都没有帮助。

<CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing=“0” />
</CollectionView.ItemsLayout>

我们重载 ContentView 以包含一些额外的加载选项的代码:

Namespace Product.Forms.Pages
{
    public class ProductView : ContentView
    {
        public ProductView()
        {
            AppCenterHelper.Instance.TrackEvent(TrackEventName.PAGE_OPENED, this.GetType().ToString().Split('.').LastOrDefault());
        }

        public async Task LoadData(Guid key)
        {
            if (BindingContext is ViewModelBase viewModel)
            {
                if (viewModel.Loaded == LoadStatus.RequiresLoad)
                {
                    viewModel.Loaded = LoadStatus.Loading;

                    await viewModel.Load(key);
                    // await viewModel.Load(_id, LazyLoadingBatchSize);

                    viewModel.ApplyFilter(String.Empty);

                    viewModel.Loaded = LoadStatus.Succes;
                    // viewModel.LazyLoaded = LoadStatus.Succes
                }
                else
                {
                    await viewModel.Reload();
                }
                if (!viewModel.HasSubscribedToMessageCenter)
                {
                    SubscribeToMessagingCenter();
                }
            }
            else
            {
                throw new NullReferenceException($"ViewModel of {this.GetType().ToString()} is not set as a ViewModelBase.");
            }
        }

        public void SubscribeToMessagingCenter()
        {
            if (BindingContext is ViewModelBase vm)
            {
                vm.SubscribeToMessagingCenter();
                vm.HasSubscribedToMessageCenter = true;
            }
        }

        public void UnSubscribeFromMessagingCenter()
        {
            if (BindingContext is ViewModelBase vm)
            {
                vm.UnSubscribeFromMessagingCenter();
            }
        }
    }
}

标签: xamarinxamarin.formsxamarin.androidpaddingcollectionview

解决方案


推荐阅读