包含 ListView 的 Xamarin.Forms 滚动屏幕答案

【问题标题】：Xamarin.Forms Scroll screen which contains a ListView包含 ListView 的 Xamarin.Forms 滚动屏幕
【发布时间】：2020-07-25 18:15:06
【问题描述】：

我是 Xamarin.Forms 的新手，我开始实现一个产品屏幕，其中包含标题、搜索栏、一些过滤控件和主 ListView。

一切正常，ListView 显示项目并且它们按您的预期滚动。

我的目标是让整个屏幕滚动，而不仅仅是 ListView 项，原因是因为顶部元素占据了相当大的空间。

这将如何在 XAML 中实现？我尝试添加一个 ScrollView 来包含所有内容，但在 ScrollView 中添加 ListView 当然会出现问题。

谢谢。

【问题讨论】：

将一个可滚动控件嵌套在另一个控件中通常是个坏主意。这使得页面的导航对于用户来说非常困难。更好的方法是让您的顶部元素更小，或隐藏，或者可能将它们放在列表视图的标题中
谢谢。我认为在标题中添加控件是我想要的。

标签： listview xamarin xamarin.forms

【解决方案1】：

将 ListView 放在 ScrollView 中并不是一个好主意，但我们仍然尝试通过编写自定义渲染器来实现它，因为这些功能在原生平台中可用。

创建 NestedListView 类：

public class NestedListView: Xamarin.Forms.ListView  
{  
   
}

在 Androi 项目中创建 NestedListViewDroid：

public class NestedListViewDroid: ListViewRenderer  
{  
    public NestedListViewDroid(Android.Content.Context context) : base(context)  
    {  

    }  
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)  
    {  
        base.OnElementChanged(e);  
        if(e.NewElement != null)  
        {  
            var listview = this.Control as Android.Widget.ListView;  
            listview.NestedScrollingEnabled = true;  
        }  
    }  
}

然后使用like：

<ScrollView Padding="20">  
    <StackLayout>  
        ...

        <controls:NestedListView  x:Name="listview">  
        </controls:NestedListView >  

    ... 
    </StackLayout>  
</ScrollView>

【讨论】：

【解决方案2】：

您可以使用 StackLayout。

 <ScrollView>
            <StackLayout>
                <ListView>
                </ListView>
            </StackLayout>
 </ScrollView>

【讨论】：

【解决方案3】：

您可以设置列表视图的TranslationY 然后它是滚动的，因此它将 ListView.Header 部分向上移动。 Michael Ridland 有一篇非常好的博客文章，请看： facebook listview scroll with translationY

【讨论】：

【解决方案4】：

可绑定布局可能很有用

   <ScrollView>
            <StackLayout BindableLayout.ItemsSource="">
                <BindableLayout.ItemTemplate>
                    <!-- Your ListView DataTemplate -->
                </BindableLayout.ItemTemplate>
            </StackLayout>
   </ScrollView>

【讨论】：