xamarin.forms - 顶部定位的 Xamarin 形成带有标题的列表视图 - 问题：顶部位置在某些 iPhone 型号上有所不同

Question

我需要设置列表视图的高度，以便在添加或删除视图项时不会切断底部视图单元格。我可以为某些 iPhone 型号实现它，但不能为其他型号实现。看来这不是通过 iPhone 模型实现它的正确方法。我的问题是： 1. 在某些 iPhone 型号上，为什么在添加视图项后顶部位置会向下移动约 25 像素？2.如何找到列表视图的绝对顶部位置Y坐标？

似乎 AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" 没有帮助。VerticalOptions="Start" 也无济于事。

注：1.安卓手机无此问题。2.仅观察：似乎更改列表视图标题brandStack的边距对布局没有影响，例如。看不到增加的利润。3. 下面两张截图显示，在列表视图中添加一个项目后，列表视图标题的顶部位置向下移动了一点。

代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="tecommobile.Views.PanelsHomePage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:effects="clr-namespace:tecommobile.Effects;assembly=tecommobile"
             xmlns:tecommobile="clr-namespace:tecommobile;assembly=tecommobile"
             xmlns:views="clr-namespace:tecommobile.Views;assembly=tecommobile"
             xmlns:controls="clr-namespace:Flex.Controls;assembly=Flex"
             xmlns:system="clr-namespace:System;assembly=netstandard"
             x:Name="PanelHomePage"
             Title="{Binding Title}"
             BackgroundColor="Bisque"
             NavigationPage.HasNavigationBar="false">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="addPanelStyle" TargetType="views:CustomImageButton" BasedOn="{StaticResource customImageButtonStyle}">
                <Setter Property="Source" Value="panel_add.png" />
                <Setter Property="HeightRequest" Value="70" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <RelativeLayout>
            <tecommobile:GradientColorStack RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                                                   Property=Height,
                                                                                                   Factor=1}"
                                            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                                                  Property=Width,
                                                                                                  Factor=1}"
                                            Style="{StaticResource gradientColorStack}">
                <StackLayout>
                    <StackLayout x:Name="panelListViewStack" BackgroundColor="Red"
                                 AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
                        <ListView x:Name="ItemsListView" BackgroundColor="Orange"
                              Margin="15"
                              CachingStrategy="RecycleElement"
                              IsPullToRefreshEnabled="false"
                              ItemsSource="{Binding Items}"
                              RefreshCommand="{Binding LoadItemsCommand}"
                              SelectionMode="None"
                              Style="{StaticResource listViewNoSeparatorStyle}"
                              Scrolled="ItemsListView_OnScrolled">
                            <ListView.Header>
                                <StackLayout x:Name="brandStack" Margin="15, 0, 15, 0" HeightRequest="150" BackgroundColor="Yellow">
                                    <Image HeightRequest="48"
                                           HorizontalOptions="Center"
                                           Source="Icon_ILXLinks.png"
                                           WidthRequest="48"
                                           Margin="0,30,0,0" />
                                    <Label FontSize="20"
                                           HorizontalTextAlignment="Center"
                                           Text="TecomPlus"
                                           TextColor="White"
                                           VerticalTextAlignment="Center" />
                                    <Label FontSize="14"
                                           HorizontalTextAlignment="Center"
                                           Text="Your smart security manager"
                                           TextColor="White"
                                           VerticalTextAlignment="Center"
                                           Margin="0,0,0,20" />
                                </StackLayout>
                            </ListView.Header>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <Grid effects:RoundCornersEffect.CornerRadius="8" HeightRequest="75" Margin="2" BackgroundColor="{Binding PanelColour}">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="1*" />
                                                <ColumnDefinition Width="6*" />
                                                <ColumnDefinition Width="1*" />
                                            </Grid.ColumnDefinitions>
                                            <Image Grid.Row="0" Grid.Column="0" Source="{Binding BindingContext.EditToggleIcon, Source={x:Reference PanelHomePage}}"
                                                       BackgroundColor="Transparent" WidthRequest="50" HorizontalOptions="StartAndExpand" Margin="10,0,0,0">
                                                <Image.GestureRecognizers>
                                                    <TapGestureRecognizer Command="{Binding Path=BindingContext.HomePageEditPanelCommand, Source={x:Reference PanelHomePage}}" CommandParameter="{Binding .}"
                                                                          NumberOfTapsRequired="1" />
                                                </Image.GestureRecognizers>
                                            </Image>
                                            <Label Grid.Row="0" Grid.Column="1" Text="{Binding Text}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" VerticalOptions="FillAndExpand"
                                                       LineBreakMode="NoWrap" FontSize="14" TextColor="{Binding PanelTextColour}">
                                            </Label>
                                            <Image Grid.Row="0" Grid.Column="2" Source="forward.png" Style="{StaticResource rightImageStyle}">
                                            </Image>
                                            <Grid.GestureRecognizers>
                                                <TapGestureRecognizer Command="{Binding Path=BindingContext.RunPanelCommand, Source={x:Reference PanelHomePage}}" CommandParameter="{Binding .}"
                                                                  NumberOfTapsRequired="1" />
                                            </Grid.GestureRecognizers>
                                        </Grid>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>

                    <StackLayout HeightRequest="70"></StackLayout>

                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BackToEditCommand}"/>
                    </StackLayout.GestureRecognizers>
                </StackLayout>
                <tecommobile:GradientColorStack.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding BackToEditCommand}"/>
                </tecommobile:GradientColorStack.GestureRecognizers>
            </tecommobile:GradientColorStack>
            <views:CustomImageButton Command="{Binding InfoCommand}" BackgroundColor="Transparent"
                   HeightRequest="30"
                   WidthRequest="30"
                   RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                     Property=Width,
                                                                     Factor=1,
                                                                     Constant=-45}"
                   RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                     Property=Height,
                                                                     Factor=0,
                                                                     Constant=35}"
                   Source="info.png">
            </views:CustomImageButton>

            <Grid x:Name="bottomGrid" BackgroundColor="#216593" effects:RoundCornersEffect.CornerRadius="8"
                  RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-140}"
                  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1, Constant=-70}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1.0*" />
                    <ColumnDefinition Width="1.0*" />
                </Grid.ColumnDefinitions>

                <Image x:Name="AddButton" Source="panel_add.png" Grid.Row="0" Grid.Column="0"  Style="{StaticResource buttonImageStyle}">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding AddItemCommand}" NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
                <Image x:Name="DeleteButton" Source="{Binding BindingContext.DeleteToggleIcon, Source={x:Reference PanelHomePage}}" 
                                         Grid.Row="0" Grid.Column="1" Style="{StaticResource buttonImageStyle}">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding ToggleDeleteIconCommand}" CommandParameter="{x:Reference DeleteButton}" NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
            </Grid>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

标签： xamarin.forms

Answer 1

顶部位置向下移动是因为您在 listView 中设置的边距：

 <ListView BackgroundColor="Orange" Margin="15">

删除 Margin="15"，空间将消失。

顺便说一句，您可以添加page-safe-area-layout以使其看起来更好：

<ContentPage ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             Title="Safe Area"
             ios:Page.UseSafeArea="true">
    <StackLayout>
        ...
    </StackLayout>
</ContentPage>