收到新消息时，让 ListView 自动滚动到底部？

Question

我一直在使用 this example 在 xamarin 中构建一个移动应用程序来与我的聊天机器人交互。我遇到的问题是，显示机器人和用户之间消息的 ListView 不会在其中显示新消息时自动滚动到底部。代码如下：

<ContentPage.Content>
    <StackLayout Margin="5">
        <ListView x:Name="ChatListView"
            VerticalOptions="FillAndExpand"
            SelectedItem="{Binding SelectedMessage}"
            ItemsSource="{Binding BotMessages, Mode=TwoWay}"
            BackgroundColor="Azure"
            HasUnevenRows="True" 
            SeparatorVisibility="None"
            ItemTemplate="{StaticResource ChatDataTemplateSelector}"/>
        <StackLayout Orientation="Horizontal">
            <Entry Placeholder="Ask a question.."
                Margin="5"
                Keyboard="Chat"
                Text="{Binding CurrentMessage, Mode=TwoWay}"
                HorizontalOptions="FillAndExpand"
                Completed="Entry_Completed"/>
            <Button Text="Send" Command="{Binding SendCommand}"/>
        </StackLayout>
    </StackLayout>
</ContentPage.Content> 

有没有办法让 Listview 在收到新消息时自动滚动到底部？

Answer 1

要滚动到某个项目，您所要做的就是：

ChatListView.ScrollTo(item, ScrollToPosition.MakeVisible, true);

如果您想要一个在与可观察集合一起使用时自动滚动到新/更新项目的列表，您可以尝试使用此扩展：

namespace Your.Namespace.For.Custom.Controls
{
    public class AutoScrollListView : ListView
    {
        private INotifyCollectionChanged _previousObservableCollection;

        public AutoScrollListView(ListViewCachingStrategy cachingStrategy)
            : base(cachingStrategy)
        {
        }

        public AutoScrollListView()
            : base()
        {
        }

        protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == nameof(ItemsSource))
            {
                if (_previousObservableCollection != null)
                {
                    _previousObservableCollection.CollectionChanged -= OnItemsSourceCollectionChanged;
                    _previousObservableCollection = null;
                }

                if (ItemsSource is INotifyCollectionChanged newObservableCollection)
                {
                    _previousObservableCollection = newObservableCollection;
                    newObservableCollection.CollectionChanged += OnItemsSourceCollectionChanged;
                }
            }
        }

        private void OnItemsSourceCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add || e.Action == NotifyCollectionChangedAction.Replace)
            {
                foreach (var item in e.NewItems)
                {
                    // Scroll to the item that has just been added/updated to make it visible
                    ScrollTo(item, ScrollToPosition.MakeVisible, true);
                }
            }
        }
    }
}

要使用它，请记住将其命名空间添加到 XAML 文件中：

<Page 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:custom="clr-namespace:Your.Namespace.For.Custom.Controls" 
    x:Class="Your.Namespace.YourPage">

    ...

    <ContentPage.Content>
        <StackLayout Margin="5">
            <custom:AutoScrollListView
                x:Name="ChatListView"
                VerticalOptions="FillAndExpand"
                SelectedItem="{Binding SelectedMessage}"
                ItemsSource="{Binding BotMessages, Mode=TwoWay}"
                BackgroundColor="Azure"
                HasUnevenRows="True" 
                SeparatorVisibility="None"
                ItemTemplate="{StaticResource ChatDataTemplateSelector}" />
            <StaLayout Orientation="Horizontal">
                <Entry 
                    Placeholder="Ask a question.." 
                    Margin="5" 
                    Keyboard="Chat"
                    Text="{Binding CurrentMessage, Mode=TwoWay}"
                    HorizontalOptions="FillAndExpand"
                    Completed="Entry_Completed"/>
                <Button Text="Send" Command="{Binding SendCommand}" />
            </StackLayout>
        </StackLayout>
    </ContentPage.Content> 

    ...

</Page>

请记住，如上所述，此自定义列表仅在属性 ItemsSource 绑定到可观察集合时才会自动滚动。

希望对你有帮助！