我在iOS设备中的列表视图存在问题

Question

[我用Xamarin表格为iPhone和Android的拖曳设备开发了一个表格，问题是当我在android listview上运行模拟器时，他们看起来不错

但是当我在iPhone上运行模拟器时，它们看起来像这样这里有一些UI问题

代码是相同的！

XML代码

        <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:o="clr-namespace:Octane.Xamarin.Forms.VideoPlayer;assembly=Octane.Xamarin.Forms.VideoPlayer"
                 mc:Ignorable="d"
                 x:Class="rowad.View.VideoPage">
        <ContentPage.Content>
            <StackLayout Padding="20" Spacing="20">
                <Label Text="סרטונים" FontSize="20" HorizontalOptions="Center" TextColor="#19B5FE"/>
                <ListView x:Name="VideoList" ItemTapped="VideoList_ItemTapped">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ImageCell Text="{Binding VideoName}" ImageSource="{Binding Image}" TextColor="#19B5FE"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </ContentPage.Content>
    </ContentPage>

C＃代码

 public partial class VideoPage : ContentPage
    {
        VideoView vvc;
        public VideoPage()
        {
            InitializeComponent();
            vvc = new VideoView();
            VideoList.ItemsSource = vvc.videoClasses;
        }

        public void VideoList_ItemTapped(object sender, ItemTappedEventArgs e)
        {
            var info = e.Item as VideoClass;

            WebView webView = new WebView
            {
                Source = new UrlWebViewSource
                {
                    Url = info.UrlName,
                },
                VerticalOptions = LayoutOptions.FillAndExpand
            };


            // Build the page.
            this.Content = new StackLayout
            {
                Children =
                {
                    webView
                }
            };
        }

    }

列表C＃

 class VideoClass
    {
        public string VideoName { get; set; }
        public string UrlName { get; set; }
        public string Image { get; set; }
        public List<VideoClass> GetVideoClasses()
        {
            List<VideoClass> videoClasses = new List<VideoClass>()
            {   
                new VideoClass(){ VideoName="مين احنا",UrlName="https://youtu.be/7CLP9g3yhoQ",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة مواد",UrlName="https://youtu.be/FsBiKd9JN7o",Image="Bird.png" },
                new VideoClass(){ VideoName="بسيخولوجيا",UrlName="https://youtu.be/Bhsi4N_tnKU",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة زراعية",UrlName="https://youtu.be/_8zxliW1YDc",Image="Bird.png" },
                new VideoClass(){ VideoName="طب بيطري",UrlName="https://youtu.be/ubDAKzKAAF0",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة جينات",UrlName="https://youtu.be/BqIvzILC3MI",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة طيارات",UrlName="https://youtu.be/dWyLg7YATLA",Image="Bird.png" },
                new VideoClass(){ VideoName="معالج نطق وسمع",UrlName="https://youtu.be/fowF8vKpcok",Image="Bird.png" },
                new VideoClass(){ VideoName="تصميم صناعي",UrlName="https://youtu.be/YcHtH159Vvc",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة ماكنات",UrlName="https://youtu.be/kbC_3YbayWA",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة غذاء وبيوتكنولوجيا",UrlName="https://youtu.be/g4NqKwd1vAM",Image="Bird.png" },
                new VideoClass(){ VideoName="علم الدماغ",UrlName="https://youtu.be/NI-b6OK-9Uc",Image="Bird.png" },
                new VideoClass(){ VideoName="علم الحاسوب",UrlName="https://youtu.be/ljgYHdycRE0",Image="Bird.png" },
                new VideoClass(){ VideoName="هندسة برمجة",UrlName="https://youtu.be/eFMW7wXEuik",Image="Bird.png" },
                new VideoClass(){ VideoName="العلاج الوظيفي",UrlName="https://youtu.be/iQPmCPeRMvI",Image="Bird.png" }
            };
            return videoClasses;
        }
    }

该列表不是用于同一张图片，但是所有列表都是相同的

Answer 1

如果使用imageCell，则没有可以更改图像尺寸的选项。您可以查看文档中的示例屏幕截图，结果与您的结果相同。

ImageCells是可定制的，允许您设置：

文本–第一行以大字体显示的文本
• 详细信息–第一行下方显示的文本较小的字体
• TextColor –文本的颜色
• DetailColor –详细文本的颜色
• ImageSource –要在文本旁边显示的图像

解决方案：

您需要写出custom-cell以满足您的要求：

    <ListView x:Name="VideoList" ItemTapped="VideoList_ItemTapped">
        <ListView.ItemTemplate>
            <DataTemplate>
                <!--<ImageCell Text="{Binding VideoName}" ImageSource="{Binding Image}" TextColor="#19B5FE"/>-->

                <ViewCell>
                    <StackLayout HeightRequest="60" Orientation="Horizontal">

                        <Image Aspect="Fill" Source="{Binding Image}" HeightRequest="40" WidthRequest="40" HorizontalOptions="Start" VerticalOptions="CenterAndExpand"/>
                        <Label TextColor="#19B5FE" Text="{Binding VideoName}" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>

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

这里是结果：