Xamarin.Forms - ListView 在运行时更改高度 [英] Xamarin.Forms - ListView change height at runtime
问题描述
我正在使用 Xamarin.Forms 开发跨平台应用程序.在其中一个页面中，我有一个头像、一些信息，然后是一个 ListView.问题是我把所有这些都封装在一个 ScrollView 中，所以我可以滚动整个内容.问题是我丢失了 ListView 滚动行为.这是一些屏幕截图:
I'm developing a cross-platform app using Xamarin.Forms. In one of the pages I've an avatar image, some info, and then a ListView. The thing is that I've all this wrapped in a ScrollView, so I'm able to scroll all over the content. The issue with this is that I'm losing the ListView scroll behaviour. This're some screenshots:
正如您所看到的，XAML 视图基本上是头像 Image(救火车图像)，然后是最后检查步骤"信息，然后是 ListView.我在 ListView 中硬编码了一个 HeightRequest 所以它有一个更大的高度.但问题是，当我滚动到页面底部时，我无法继续滚动 ListView，因为 ScrollView 会干扰该行为.我需要使用 ListView 因为我在那里显示的检查报告列表是从网络服务填充的，我在进入和退出页面时更新该列表.这是 XAML 代码:
As you can see the XAML view is basically, the avatar Image (the firetruck image), then the "Last check step" info, and then we've the ListView. I hardcoded a HeightRequest in the ListView so It has a bigger height. But the thing is that when I scroll to the bottom of the page I can't keep scrolling through the ListView because the ScrollView messes with that behaviour. I need to use a ListView because the list of check reports that I'm showing there is populated from a webservice, and I update that list when I enter and exit the page. This is the XAML 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:checkReport="clr-namespace:HalliganTL.View;assembly=HalliganTL"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
x:Class="HalliganTL.View.ApparatusDetailPage" BackgroundColor="#FFFFFFFF">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ScrollView x:Name="GeneralScrollView"
Orientation="Vertical" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="180"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="360"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Top Image -->
<ContentView Grid.Column="0" Grid.Row="0" Padding="15">
<controls:CircleImage x:Name="ApparatusImage"
HeightRequest="150" WidthRequest="150"
VerticalOptions="Center"
BorderColor="#3B5685"
BorderThickness="2"
HorizontalOptions="Center"
Aspect="AspectFill">
</controls:CircleImage>
</ContentView>
<!-- Last Check Separator -->
<AbsoluteLayout Grid.Column="0" Grid.Row="1" x:Name="LastCheckContainerTitle" BackgroundColor="#FFE4E4E9" Padding="5,15,15,5" VerticalOptions="End" >
<Label Text="LAST CHECK" Style="{StaticResource separatorLabel}" />
</AbsoluteLayout>
<!-- Last Check Detail -->
<checkReport:CheckReportViewPage Grid.Column="0" Grid.Row="2" x:Name="LastCheckReportView">
<checkReport:CheckReportViewPage.GestureRecognizers>
<TapGestureRecognizer Tapped="OnLastCheckReportClicked" NumberOfTapsRequired="1" />
</checkReport:CheckReportViewPage.GestureRecognizers>
</checkReport:CheckReportViewPage>
<AbsoluteLayout Grid.Column="0" Grid.Row="3" x:Name="CheckHistoryTitle" BackgroundColor="#FFE4E4E9" Padding="5,15,15,5" >
<Label Text="CHECK HISTORY" Style="{StaticResource separatorLabel}" FontAttributes="None" VerticalOptions="End" />
</AbsoluteLayout>
<!-- Apparatus check history -->
<ListView x:Name="CheckHistoryListView"
HeightRequest="380"
Grid.Column="0" Grid.Row="4"
HorizontalOptions="FillAndExpand"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
VerticalOptions="FillAndExpand" ItemTapped="OnItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<checkReport:CheckReportViewPage/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ScrollView>
<Label Text="Start Check" HeightRequest="60" VerticalOptions="End" BackgroundColor="#3B5685" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontSize="18" TextColor="White">
<Label.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnStartCheckClicked"
NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ContentPage>
所以基本上我要问的是如何实现类似视差效果的东西，向下滚动然后将滚动行为委托给 ListView 这样我就可以滚动 中的每个项目>ListView.目前我只能看到适合 ListView HeightRequest 维度的项目.例如，在我正在展示的示例屏幕截图中，ListView 中还有其他几个项目，但我无法滚动它们，因为 ScrollView 与 ScrollViewcode>ListView 滚动行为.
So basically what I'm asking is how can achieve something like a parallax effect, scrolling down and then delegate the scroll behaviour to the ListView that way I can scroll through every item in the ListView. Currently I'm just able to see the items that fit in the ListView HeightRequest dimension. In the example screenshot that I'm shoing for example, there are several other items in that ListView but I can't scroll through them because the ScrollView is messing with the ListView scroll behaviour.
推荐答案
推荐使用 ListView 在页面上放置内容的方法是使用 ListView 的页脚和页眉属性.
The recommended approach for putting content on a page with a ListView is to use the Footer and Header properties of the ListView.
<ListView x:Name="listView">
<ListView.Footer>
<Label Text="Footer" />
</ListView.Footer>
</ListView>
这样你就不需要再换一个卷轴了.
This way you don't need to wrap in another scroll.
这篇关于Xamarin.Forms - ListView 在运行时更改高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
