我正在尝试构建一个食谱页面，该页面的顶部包含标题和视频，然后提供除配料设备和方法的三个listView之外的更多信息。我试图将它们全部放入滚动视图，但是它会截断所有列表视图，这也被认为是不好的做法。如何使此页面可滚动并且仍然具有三个列表视图？
<?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:video="clr-namespace:SQLiteListView.FormsVideoLibrary"
xmlns:local="clr-namespace:SQLiteListView.Models"
xmlns:viewmodels="clr-namespace:SQLiteListView.ViewModels"
x:Class="SQLiteListView.Views.RecipePage"
Title="{Binding Recipe.RecipeName}">
<ContentPage.Content>
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="1">
<Label Text="{Binding Recipe.RecipeName}"
FontSize="50" />
<video:VideoPlayer HeightRequest="320" WidthRequest="220">
<video:VideoPlayer.Source>
<video:ResourceVideoSource>
<video:ResourceVideoSource.Path>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Videos/iOSApiVideo.mp4" />
<On Platform="Android" Value="ScrambledEggs.mp4" />
<On Platform="UWP" Value="Videos/UWPApiVideo.mp4" />
</OnPlatform>
</video:ResourceVideoSource.Path>
</video:ResourceVideoSource>
</video:VideoPlayer.Source>
</video:VideoPlayer>
</StackLayout>
<StackLayout Grid.Row="2">
<Label
Margin="10"
Text="Meal Type"
FontSize="Large"
FontAttributes="Bold"/>
<Label
Text="{Binding Recipe.MealType}"
Margin="10"
FontSize="Medium"/>
<Label Margin="10"
Text="Serves"
FontSize="Large"
FontAttributes="Bold"/>
<Label Text="{Binding Recipe.Serves}"
Margin="10"
FontSize="Medium"/>
<Label Margin="10"
Text="Preperation Time"
FontSize="Large"
FontAttributes="Bold"/>
<Label Text="{Binding Recipe.PrepTime}"
Margin="10"
Grid.Row="8"
FontSize="Medium"/>
<Label Margin="10"
Text="Cooking Time"
FontSize="Large"
FontAttributes="Bold"/>
<Label Text="{Binding Recipe.CookTime}"
Margin="10"
FontSize="Medium"/>
</StackLayout>
<StackLayout Grid.Row="3">
<Label Margin="10"
Text="Equipment"
FontSize="Large"
FontAttributes="Bold"/>
<viewmodels:NonScrollableListView ItemsSource="{Binding EquipmentList}"
x:Name="EquipmentListView" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Label HorizontalOptions="Start"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding EquipmentName}"
FontSize="Medium"/>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</viewmodels:NonScrollableListView>
</StackLayout>
<StackLayout Grid.Row="4">
<Label Margin="10"
Text="Ingredients"
FontSize="Large"
FontAttributes="Bold"/>
<Picker Title="--Number of People--"
ItemsSource="{Binding PickersList}"
ItemDisplayBinding="{Binding NumberOfPeople}"
SelectedItem="{Binding SelectedPicker}"/>
<viewmodels:NonScrollableListView x:Name="IngredientsListView"
ItemsSource="{Binding IngredientsList}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal" Margin="10" Grid.Row="5">
<Label HorizontalOptions="Start"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding IngredientsName}"
FontSize="Medium"/>
<Label HorizontalOptions="End"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding Ammount}"
FontSize="Medium"/>
<Label HorizontalOptions="End"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
Text="{Binding Units}"
FontSize="Medium"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</viewmodels:NonScrollableListView>
</StackLayout>
<Label Margin="10"
Text="Method"
Grid.Row="15"
FontSize="Large"
FontAttributes="Bold"/>
<viewmodels:NonScrollableListView x:Name="MethodList"
ItemsSource="{Binding MethodList}"
Grid.Row="16">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="500">
<ViewCell.View>
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" >
<Label Text="{Binding MethodNumber}"
FontSize="Medium"/>
<Label Text="{Binding MethodName}"
FontSize="Medium"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</viewmodels:NonScrollableListView>
</Grid>
</ScrollView>
</ContentPage.Content>
</ContentPage>
答案 0 :(得分：0)
如果您对列表视图的可滚动性有疑问，您要做的就是使它们不可滚动，您可以为其创建自定义渲染器，如下所示：
PCL中的自定义列表视图：
public class NonScrollableListView : ListView
{
public NonScrollableListView() : base()
{
}
protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
base.OnPropertyChanged(propertyName);
}
}
Android Listview：
public class NonScrollableListViewRenderer : ListViewRenderer
{
public NonScrollableListViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
{
base.OnElementChanged(e);
try
{
if (e == null || e.NewElement == null)
{
return;
}
var lit = e.NewElement;
if (e.NewElement != null)
{
var listView = this.Control as Android.Widget.ListView;
listView.NestedScrollingEnabled = true;
}
}
catch (System.Exception ex)
{
}
}
public override void OnViewAdded(Android.Views.View child)
{
base.OnViewAdded(child);
}
protected override void OnDetachedFromWindow()
{
try
{
if (Control == null)
{
}
if (Element == null)
{
}
base.OnDetachedFromWindow();
}
catch (System.Exception ex)
{
}
}
protected override void Dispose(bool disposing)
{
disposing = false;
if (Element == null)
{
}
if (Control == null)
{
}
base.Dispose(disposing);
}
}
iOS列表视图：
public class NonScrollableListViewRenderer : ListViewRenderer
{
public NonScrollableListViewRenderer()
{
}
protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
{
base.OnElementChanged(e);
if (Control == null)
return;
var tableView = Control as UITableView;
tableView.SeparatorStyle = UITableViewCellSeparatorStyle.None;
tableView.ScrollEnabled = true;
}
}
不要忘记在名称空间上添加ExportRenderer标头：
[assembly: ExportRenderer(typeof(NonScrollableListView), typeof(NonScrollableListViewRenderer))]
更新
稍微看了一下代码，我意识到您正在使用StackLayout作为所有列表视图和所有其他内容的最外面的父级，因此我建议您尝试将StackLayout的间距设置为0，如果不能解决问题，那么我建议您将StackLayout替换为Grid，并将所有RowDefinitions设置为Auto，然后重试