【问题标题】:Is Anyone have a Listview Renderer for chat [closed]是否有人有用于聊天的 Listview 渲染器 [关闭]
【发布时间】:2019-10-08 22:34:58
【问题描述】:

我需要一个 ListView 渲染器来像 whatsapp 这样的聊天。

如果有新消息出现,它会自动向下滚动。

如果有这方面的样品,请告诉我。

谢谢

【问题讨论】:

标签: c# xamarin xamarin.forms xamarin.ios syncfusion


【解决方案1】:

您不需要自定义渲染器,只需使用 ListView 并添加一些逻辑来为您进行滚动。

View.xaml 文件:

<!-- Previous Implementation -->

        <ListView x:Name="MessagesListView"
              Grid.Row="0"
              BackgroundColor="Transparent"
              HasUnevenRows="True"
              ItemTemplate="{StaticResource MessageTemplateSelector}"
              ItemsSource="{Binding Messages}"
              SelectionMode="None"
              SeparatorVisibility="None" />

<!-- Remaining Implementation -->

x:Name 属性是重要部分,您将在后面的代码中使用该名称。

现在是 View.xaml.cs 文件:

// Previous Implmentation

    /// <summary>
    /// Override of OnAppearing method. Fires as page is appearing.
    /// Good place to set up event handlers.
    /// </summary>
    protected override void OnAppearing()
    {
        base.OnAppearing();

        ((INotifyCollectionChanged)MessagesListView.ItemsSource).CollectionChanged += OnListViewCollectionChanged;
    }

    /// <summary>
    /// Override of OnDisappearing method. Fires as page is disappearing.
    /// Good place to tear down event handlers.
    /// </summary>
    protected override void OnDisappearing()
    {
        base.OnDisappearing();

        ((INotifyCollectionChanged)MessagesListView.ItemsSource).CollectionChanged -= OnListViewCollectionChanged;
    }

    /// <summary>
    /// Scrolls a the messages listview to the last item whenever
    /// a new message is added to the collection.
    /// </summary>
    private void OnListViewCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        var myList = ((IEnumerable<Message>)MessagesListView.ItemsSource).ToList();

        // Must be ran on main thread or Android chokes.
        Device.BeginInvokeOnMainThread(async () =>
        {
            // For some reason Android requires a small delay or the scroll never happens.
            await Task.Delay(50);
            MessagesListView.ScrollTo(myList.Last(), ScrollToPosition.End, false);
        });
    }

// Remaining Implementation

基本上,您将设置一个事件以在 ListView 的 ItemSource 更改时触发。在这种情况下,您将滚动到列表的末尾。

【讨论】:

  • 嗨@Andrew 我试过了,但得到了这个错误“序列不包含列表视图的 xamarin 表单中的元素”
【解决方案2】:

您可以通过在将新项目添加到集合后将 ListView 滚动到其最后一个索引来实现您的要求。要滚动列表视图,您可以通过传递 itemIndex 来调用 LayoutManager.ScrollToRowIndex 方法。

私有 void InitializeSendCommand() { SendIcon = ImageSource.FromResource("SfListViewSample.Images.SendIcon.png", 程序集); 新文本 = ""; 发送命令 = 新命令(() => { if (!string.IsNullOrWhiteSpace(NewText)) { MessageInfo.Add(新的 MessageInfo {

                    OutgoingMessageIndicator = ImageSource.FromResource("SfListViewSample.Images.OutgoingIndicatorImage.png", assembly),
                    Text = NewText,
                    TemplateType = TemplateType.OutGoingText,
                    DateTime = string.Format("{0:HH:mm}", DateTime.Now)
                });
                (ListView.LayoutManager asLinearLayout).ScrollToRowIndex(MessageInfo.Count - 1, Syncfusion.ListView.XForms.ScrollToPosition.Start);
            }
            NewText = null;
        });

}

我们已附上样本供您参考,

示例链接:[http://www.syncfusion.com/downloads/support/directtrac/237037/ze/Sample2053309646][1]

希望这会有所帮助。

Syncfusion 支持团队

【讨论】:

    【解决方案3】:

    您不需要自定义渲染器进行聊天,因为一个简单的 ListView 就足够了。

    基本上,您会将 ItemsSource 属性绑定到 ObservableCollection,因此当添加新消息时,它将自动出现在列表视图中。

    此外,如果您认为用户不需要/不必一次查看大量历史聊天消息,例如,您可能希望使用无限滚动技术。 https://www.youtube.com/watch?v=DG5Asglf0vU

    滚动到最后一条消息:

    Device.BeginInvokeOnMainThread (() => {
               Listviewname.scrollto(items[count-1], scrolltoposition.end, false)
           });
     });
    

    【讨论】:

    • 是的,我知道在 ObservableCollection 中可以自动添加。在聊天中,我也在使用 ObservableCollection 并自动添加它,但我想显示最后一条消息,如 Whatsapp。如果新消息来了,它会显示最后一条消息而不是上一条消息
    • 如果对您有帮助,请标记为答案并点赞:-)
    猜你喜欢
    • 2021-07-07
    • 2011-04-23
    • 2016-12-04
    • 1970-01-01
    • 2019-02-11
    • 2012-03-31
    • 2012-07-30
    • 1970-01-01
    • 2018-10-28
    相关资源
    最近更新 更多