Xamarin.Forms（iOS項目）：ListView分隔符顯示在所有屏幕中

Question

我有一個帶有默認SeparatorVisibility的ListView。 如果ItemsSource中有元素，我的Android項目將顯示Separator，並在最后一個元素下方停止顯示它。 這是我想要的iOS項目的結果。

但是，在我的iOS項目中，無論我有多少元素，屏幕上都充滿了分隔符，即使我沒有元素或只有一個，分隔符仍然存在。

有人可以給我一個原因，如何解決？ 謝謝。

Answer 1

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(ListView), typeof(CustomListViewRenderer))]
namespace yourNamespace
{
    public class CustomListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                var listView = Control as UITableView;
                listView.SeparatorInset = UIEdgeInsets.Zero;
            }
        }
    }
}

Answer 2

我想你可以看一下這篇文章

這些是一些技巧

首先禁用默認分隔符，這是通過將以下屬性添加到ListView XAML來完成的

SeparatorColor="Transparent"

之后，將完整的ViewCell內容包裝在一個Double StackLayout中！ 我知道這聽起來有些矯kill過正，但是這樣您就不會遇到任何有關ViewCell…或其他內容的邊距的BoxView問題。 第一個StackLayout應該將BackgroundColor設置為您希望分隔符使用的顏色，第二個StackLayout應該與其所在容器的其余部分具有相同的BackgroundColor……在我們的示例頁面中，該顏色設置為白色。 還要確保在第二個StackLayout的底部添加邊距，因為這將代表分隔符的厚度！

我認為您可以使用此“邊距” ...當您的數據為空時，請刪除邊距，這樣就不必使用分隔符

<ListView x:Name="SeparatorListView"
    SeparatorColor="Transparent"
    ItemsSource="{Binding Persons}"
    Margin="0,20,0,0"
    RowHeight="60"
    HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
    BackgroundColor="White"
    Grid.Row="1">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell IsEnabled="false">
                <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                    BackgroundColor="Black">
                <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                    BackgroundColor="White"
                    Margin="0,0,0,0.4">
                    <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" Spacing="0">
                        <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" />
                        <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" Margin="20,0,20,0" />
                    </StackLayout>
                </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

將其放置在適當位置后，您將獲得與本博客文章右上方的預覽圖像相同的視覺效果。

另外，如果頁面的背景顏色不是白色，則可以省略其中的StackLayouts。 因為如果是這種情況，則可以通過在ListView中播放透明度來使用該顏色作為分隔符顏色。

例如，僅在頁面本身也將BackgroundColor設置為Olive時，注釋才會起作用！

<ListView x:Name="SeparatorListView"
    SeparatorColor="Transparent"
    ItemsSource="{Binding Persons}"
    Margin="0,20,0,0"
    RowHeight="60"
    HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
    BackgroundColor="Olive"
    Grid.Row="1">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell IsEnabled="false">
                    <StackLayout BackgroundColor="#f4eac3"
                                Padding="0,5,0,5"
                                 HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                        <StackLayout BackgroundColor="Transparent"
                                     HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"
                                     Spacing="0"
                                     Margin="20,0,20,0">
                        <Label Text="{Binding FullName}" TextColor="Maroon" VerticalOptions="CenterAndExpand" />
                        <Label Text="{Binding Profession}" TextColor="Maroon" VerticalOptions="CenterAndExpand" />
                    </StackLayout>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 3

那是由於在iOS端實現了ListView 。 它呈現為UITableView （對於ListView ）始終占據整個高度並顯示空項目。 要更改這種類型的行為，您可以在頁面的代碼隱藏區中動態設置ListView高度。 另一個選擇是看一下Xamarin的Evolve示例應用程序 ，該應用程序有幾個頁面，其中使用CardView和ListView結合使用，使其看起來像在Android上一樣。