xamarin 表单 - ios - listview header 出现在它应该...显示空格的下方？
xamarin forms - ios - listview header appearing below where it should... showing whitespace?
晚安，
我的 ios 上的 UI 有问题。在 android -
上工作正常
在显示订单列表的管理页面上，当用户单击每个订单右侧的“*”时，它会打开一个弹出窗口 window...显示订单详细信息...问题与弹出窗口内的布局
因此，您可以从下图中的订单详细信息屏幕中看到。在 Android 上，订单详细信息显示为弹出窗口，布局中的一切都非常整洁....但是 ios 上的同一屏幕导致列表视图 header 出现在应有的位置下方。 .在弹出窗口的顶部留下白色 space?
尝试更改布局但似乎无法弄清楚...请问有人看出我做错了什么吗？
塔
//AdminPage.xaml
<Button Grid.Column="4" Grid.Row="0" VerticalOptions="Start" Clicked="ShowMore" Text="*" CommandParameter="{Binding OrderModel_Id}"/>
//AdminPage.cs
private void ShowMore(object Sender, EventArgs e)
{
Button button = (Button)Sender;
string OrderId = button.CommandParameter.ToString();
PopupNavigation.Instance.PushAsync(new PopupView(int.Parse(OrderId)));
}
//popUp.cs
public partial class PopupView
{
public ObservableCollection<OrderDetails_Model> PreviousOrderDetails_ForUser { get; set; }
OrdersDatabase_Controller RecentOrders_Controller = new OrdersDatabase_Controller();
public PopupView(int Id)
{
try
{
InitializeComponent();
List<OrderDetails_Model> RecentOrderDetails_List = RecentOrders_Controller.GetAllOrderDetails_ById(Id);
PreviousOrderDetails_ForUser = new ObservableCollection<OrderDetails_Model>(RecentOrderDetails_List as List<OrderDetails_Model>);
int countOfOrderDetailRecords = PreviousOrderDetails_ForUser.Count;
int startingHeight = 100;
var tempHeightofStack_SearchResults = countOfOrderDetailRecords * 40;
//height of popup is adjusted depending on amount of products in order
StackSearchResultsOuter.HeightRequest = startingHeight + tempHeightofStack_SearchResults;
BindingContext = this;
}
catch (Exception ex)
{
Crashes.TrackError(ex);
}
}
}
//PopUp.Xaml
<StackLayout x:Name="StackSearchResultsOuter" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" >
<StackLayout.Resources>
<converters:ProductIdToProductNameConverter x:Key="converter"/>
</StackLayout.Resources>
<ListView ItemsSource="{Binding PreviousOrderDetailsForUser}" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="Product"
HorizontalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="0"
Text="Quantity"
HorizontalOptions="Center"/>
<Label Grid.Column="2" Grid.Row="0"
Text="Price"
HorizontalOptions="Center"/>
<Label Grid.Column="3" Grid.Row="0"
Text="Sub"
HorizontalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="4"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>
<Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>
<Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</pages:PopupPage>
在您的屏幕截图中，我看到 iOS 屏幕区域更高。
在这两个平台上，默认是在屏幕中“垂直居中”弹出。
它不是特定于平台的。如果您制作更高或更矮的 android 模拟器，您会发现它的位置也会以类似的方式发生变化。
它在更高的平台上看起来“不对”，因为它既没有整齐地隐藏在原始文本的下方，也没有居中于“空白区域”——它居中于屏幕本身。
要调整它使其在空白区域居中，试试这个：
<StackLayout x:Name="StackSearchResultsOuter" BackgroundColor="Transparent" ...
<BoxView x:Name="InvisibleSpacer" BackgroundColor = "Transparent"
HeightRequest="80" />
<ListView BackgroundColor="White" ...
根据需要调整 InvisibleSpacer 的 HeightRequest。为了准确起见，在不同的设备上，您必须使用隐藏代码，并测量您正在用这个不可见区域模仿的“Order User ...”视图的高度。超出此答案的范围。
注意：对于这个简单的任务，不需要 BoxView；您可以改为调整 Top Margin。我展示了 BoxView，因为知道如何注入空白区域是一项有用的技术。与 Margin 不同，BoxView 有自己的 BackgroundColor，这有时很有用。它也有自己的IsVisible，所以你可以根据条件控制它是否存在。 （当 IsVisible="False" 时，StackLayout 不会为其分配任何高度；就好像它的高度为零一样。）
“使其整洁”的另一种方法是将 StackSearchResultsOuter 的 VerticalOptions 设置为“开始”（或“结束”），然后设置其顶部（或底部）保证金将其向上或向下推。因此，与其居中，不如从顶部（或底部）有一些固定的偏移量，这看起来令人愉悦。
再次使用BackgroundColor="Transparent"，这样边距区域就看不见了。
晚安，
我的 ios 上的 UI 有问题。在 android -
上工作正常在显示订单列表的管理页面上，当用户单击每个订单右侧的“*”时，它会打开一个弹出窗口 window...显示订单详细信息...问题与弹出窗口内的布局
因此，您可以从下图中的订单详细信息屏幕中看到。在 Android 上，订单详细信息显示为弹出窗口，布局中的一切都非常整洁....但是 ios 上的同一屏幕导致列表视图 header 出现在应有的位置下方。 .在弹出窗口的顶部留下白色 space?
尝试更改布局但似乎无法弄清楚...请问有人看出我做错了什么吗？ 塔
//AdminPage.xaml
<Button Grid.Column="4" Grid.Row="0" VerticalOptions="Start" Clicked="ShowMore" Text="*" CommandParameter="{Binding OrderModel_Id}"/>
//AdminPage.cs
private void ShowMore(object Sender, EventArgs e)
{
Button button = (Button)Sender;
string OrderId = button.CommandParameter.ToString();
PopupNavigation.Instance.PushAsync(new PopupView(int.Parse(OrderId)));
}
//popUp.cs
public partial class PopupView
{
public ObservableCollection<OrderDetails_Model> PreviousOrderDetails_ForUser { get; set; }
OrdersDatabase_Controller RecentOrders_Controller = new OrdersDatabase_Controller();
public PopupView(int Id)
{
try
{
InitializeComponent();
List<OrderDetails_Model> RecentOrderDetails_List = RecentOrders_Controller.GetAllOrderDetails_ById(Id);
PreviousOrderDetails_ForUser = new ObservableCollection<OrderDetails_Model>(RecentOrderDetails_List as List<OrderDetails_Model>);
int countOfOrderDetailRecords = PreviousOrderDetails_ForUser.Count;
int startingHeight = 100;
var tempHeightofStack_SearchResults = countOfOrderDetailRecords * 40;
//height of popup is adjusted depending on amount of products in order
StackSearchResultsOuter.HeightRequest = startingHeight + tempHeightofStack_SearchResults;
BindingContext = this;
}
catch (Exception ex)
{
Crashes.TrackError(ex);
}
}
}
//PopUp.Xaml
<StackLayout x:Name="StackSearchResultsOuter" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Center" >
<StackLayout.Resources>
<converters:ProductIdToProductNameConverter x:Key="converter"/>
</StackLayout.Resources>
<ListView ItemsSource="{Binding PreviousOrderDetailsForUser}" HasUnevenRows="True" SeparatorVisibility="None">
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="Product"
HorizontalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="0"
Text="Quantity"
HorizontalOptions="Center"/>
<Label Grid.Column="2" Grid.Row="0"
Text="Price"
HorizontalOptions="Center"/>
<Label Grid.Column="3" Grid.Row="0"
Text="Sub"
HorizontalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="4"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>
<Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>
<Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</pages:PopupPage>
在您的屏幕截图中，我看到 iOS 屏幕区域更高。
在这两个平台上，默认是在屏幕中“垂直居中”弹出。
它不是特定于平台的。如果您制作更高或更矮的 android 模拟器，您会发现它的位置也会以类似的方式发生变化。
它在更高的平台上看起来“不对”，因为它既没有整齐地隐藏在原始文本的下方，也没有居中于“空白区域”——它居中于屏幕本身。
要调整它使其在空白区域居中，试试这个：
<StackLayout x:Name="StackSearchResultsOuter" BackgroundColor="Transparent" ...
<BoxView x:Name="InvisibleSpacer" BackgroundColor = "Transparent"
HeightRequest="80" />
<ListView BackgroundColor="White" ...
根据需要调整 InvisibleSpacer 的 HeightRequest。为了准确起见，在不同的设备上，您必须使用隐藏代码，并测量您正在用这个不可见区域模仿的“Order User ...”视图的高度。超出此答案的范围。
注意：对于这个简单的任务，不需要 BoxView；您可以改为调整 Top Margin。我展示了 BoxView，因为知道如何注入空白区域是一项有用的技术。与 Margin 不同，BoxView 有自己的 BackgroundColor，这有时很有用。它也有自己的IsVisible，所以你可以根据条件控制它是否存在。 （当 IsVisible="False" 时，StackLayout 不会为其分配任何高度；就好像它的高度为零一样。）
“使其整洁”的另一种方法是将 StackSearchResultsOuter 的 VerticalOptions 设置为“开始”（或“结束”），然后设置其顶部（或底部）保证金将其向上或向下推。因此，与其居中，不如从顶部（或底部）有一些固定的偏移量，这看起来令人愉悦。
再次使用BackgroundColor="Transparent"，这样边距区域就看不见了。