首页 > 解决方案 > UI 看起来在使用 xamarin.forms 的 ios 的初始加载中被裁剪

问题描述

<ListView>
 <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ContentView Padding="6,2,6,2">
                                <Frame BackgroundColor="White" CornerRadius="5" Margin="10,5" HasShadow="False" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  </Frame><Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition Height="Auto" />
                                        </Grid.RowDefinitions>
                                     <Label Grid.Row="0"  Text="Item1" />
                                        <Label Grid.Row="1"  Text="Item2" />
 <Label Grid.Row="2"  Text="Item3" />
</Grid>
                            </ContentView>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>

虽然页面 UI 的初始加载看起来像第 3 个标签被裁剪,如果我重新访问页面,第 3 个标签显示正确。如何通过初始加载本身完美地显示 UI。问题仅发生在 ios 中。

标签: xamllistviewuser-interfacexamarin.formsxamarin.ios

解决方案


从共享代码中,我在 iOS 上的本地站点进行了测试。但是,在 iOS 设备中没有问题。

另外,这个Xaml代码也有问题。Frame布局不包含Grid,运行效果如下:

在此处输入图像描述

如果我把它放在里面会显示如下:

在此处输入图像描述

我也在 Android 设备上进行了测试,但是它裁剪了第三个标签。如果想让它充分显示,我们可以添加RowHeightfor ListView,如下:

<ListView x:Name="listview" RowHeight="125">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ContentView Padding="6,2,6,2" BackgroundColor="AliceBlue">
                    <Frame BackgroundColor="White"
                            CornerRadius="5"
                            Margin="10,5"
                            HasShadow="False"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand">
                        <Grid HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Label Grid.Row="0"
                                    Text="Item1" />
                            <Label Grid.Row="1"
                                    Text="Item2" />
                            <Label Grid.Row="2"
                                    Text="Item3" />
                        </Grid>
                    </Frame>
                           
                           
                </ContentView>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

效果:

在此处输入图像描述


推荐阅读