我在 iOS 台设备中遇到列表视图问题

Question

我为拖车设备 iPhone 和 Android 开发了 Xamarin 表单，问题是当我运行列表视图 android 上的模拟器时，他们看起来不错

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

代码是一样的!!

XML code

        <?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# code

 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
                }
            };
        }

    }

The list 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>

结果如下：

我在 iOS 台设备中遇到列表视图问题

i have problem with listview in iOS devices

iphone

xamarin.ios

ios

xamarin.forms