Flutter之ListView翻转,自动滑动到底部

场景:最近做的客服系统,进入页面直达最底部,发送消息或者接收到他人消息后,消息列表都会自动滑动到底部,不需要我们手动滑动,这样的用户体验好

实现:

ListView布局,然后reverse反转

ListView.builder(
reverse: true, //翻转
shrinkWrap: true,
physics:PageScrollPhysics(parent: ClampingScrollPhysics()),
controller: _scrollController,
itemCount: messageList.length,
itemBuilder: (context, index) {
            Column(
                children: []
)
}

因为listview翻转了,所以储存聊天信息的数组也要翻转

//数组翻转
list.reversed

滑到底部:

ListView使用ScrollController来控制滑动,其中有jumpToanimateTo2个方法滑动到指定的位置

因为我们对listView进行了翻转,所以顶部就是底部

ScrollController _scrollController = ScrollController();
// 自动滑到底部
  autoSlide() {
    // 滑动到顶部
    //
Flutter 中,当需要监听 `ListView` 滑动底部并阻止其默认滚动行为,以便将焦点转给 `SingleChildScrollView` 的时候,你可以使用 `ScrollController` 和 `GlobalKey` 来实现这个功能。`ScrollController` 可以帮助我们跟踪滚动位置,并通过监听它的 `position` 更新事件来判断是否到达底部。 下面是一个简单的示例: ```dart import 'package:flutter/material.dart'; class ScrollListenerPage extends StatefulWidget { @override _ScrollListenerPageState createState() => _ScrollListenerPageState(); } class _ScrollListenerPageState extends State<ScrollListenerPage> with SingleTickerProviderStateMixin { final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<>(); ScrollController scrollController; @override void initState() { super.initState(); scrollController = ScrollController(initialScrollOffset: 0); // 将scrollController绑定到Scaffold scaffoldKey.currentState.attachScrollController(scrollController); } @override Widget build(BuildContext context) { return Scaffold( key: scaffoldKey, body: SingleChildScrollView( controller: scrollController, child: ListView.builder( itemCount: 50, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ); }, ), ), ); } @override void dispose() { super.dispose(); // 当离开页面时,移除控制器的引用 scaffoldKey.currentState.removeScrollController(); } // 使用ObserveScrollPhysics监听滚动位置变化 @override void didChangeDependencies(DependencyChanges dependencies) { super.didChangeDependencies(dependencies); if (dependencies.hasChanged && scrollController.position.isScrolledToBottom) { // 列表滚动到底部时,可以在此处执行焦点切换逻辑或其他操作 print("Reached bottom"); FocusScope.of(context).unfocus(); // 这里只是一个示例,你可以替换为你实际的聚焦逻辑 } } // 如果有手动滚动,这里可以取消自动滚动 @override void onVerticalDragUpdate(double velocity) { if (velocity > 0) { scrollController.animateTo( scrollController.position.minScrollExtent + 1, duration: const Duration(milliseconds: 100), curve: Curves.easeOut, ); } } // 当列表滚动停止时,检查是否已经到底部 @override void onScrollEnd侦听滚动结束事件 { if (scrollController.position.isScrolledToBottom) { // 同样在这里处理底部状态 print("Stopped at bottom"); } } //
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值