flutter中滚动的监听

1、使用控件器监听

controller是什么

 `controller` 通常被称为"控制器"。它是一个对象,用于管理用户界面中的交互和数据。不同类型的控件有不同的控制器,例如文本输入框的控制器通常被称为"文本编辑控制器"( `TextEditingController` ),滚动视图的控制器通常被称为"滚动控制器"( `ScrollController` ),动画的控制器通常被称为"动画控制器"( `AnimationController` )等等。

控制器在Flutter中被广泛使用,它们提供了一种方便的方式来管理用户界面的交互和状态。通过控制器,您可以获取或设置控件的值、监听控件的变化、控制控件的行为等等。

ScrollController是什么

ScrollController(滚动控制器)是Flutter中用于管理滚动视图的控制器对象。它允许您监听滚动事件、控制滚动位置和执行其他与滚动相关的操作。

ScrollController提供了以下常用属性和方法:

-  `offset` :获取或设置当前滚动位置的偏移量。
-  `position` :获取当前滚动位置的ScrollPosition对象。
-  `initialScrollOffset` :设置滚动视图的初始滚动偏移量。
-  `animateTo()` :以动画形式滚动到指定的偏移量。
-  `jumpTo()` :立即滚动到指定的偏移量。
-  `addListener()` :添加滚动监听器。
-  `removeListener()` :移除滚动监听器。
-  `dispose()` :释放控制器。

通过使用ScrollController,您可以在滚动视图滚动时执行自定义操作,例如加载更多数据、实现无限滚动等。

ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  _scrollController.addListener(_scrollListener);
}

@override
void dispose() {
  _scrollController.removeListener(_scrollListener);
  _scrollController.dispose();
  super.dispose();
}

void _scrollListener() {
  if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
    // 当滚动到底部时执行的操作
  }
}

ListView(
  controller: _scrollController,
  children: <Widget>[
    // 列表项
  ],
);
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {

  //滚动控制器,可以带一个初始化参数,表示偏移量
  ScrollController _scrollController = ScrollController(initialScrollOffset: 300);
  //控制floatingActionButton显示状态
  var isShow=false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //添加监听
    _scrollController.addListener(() {
       print("监听到滚动1...${_scrollController.offset}");
       setState(() {
        isShow=_scrollController.offset>1000;
       });
    });
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
        appBar: AppBar(
          title: Text("登录界面"),
        ),
        body:ListView.builder(
          itemCount: 100,
          controller: _scrollController,//添加控件器
          itemBuilder: (BuildContext context, int index){
            return ListTile(
              leading: Icon(Icons.people),
              title: Text('Item ${index + 1}'),
            );
          },
        ),
      //浮动操作按钮,isShow为真显示
      floatingActionButton: isShow? FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: (){
          /**
           * -  offset :要滚动到的目标位置的偏移量。
              -  duration (可选):滚动动画的持续时间,默认为 Duration(milliseconds: 300) 。
              -  curve (可选):滚动动画的曲线类型,默认为 Curves.easeInOut 。
           */
          _scrollController.animateTo(0, duration: Duration(seconds: 2), curve: Curves.ease);
        },
      ):null,
    );
  }
}
void main() {
  runApp(MaterialApp(
    home: LoginPage(),
  ));
}

2、NotificationListener

NotificationListener是一个小部件(Widget),用于监听和处理各种通知事件。 通过使用NotificationListener,您可以捕获并响应来自子树中各种通知的事件,包括滚动、手势、焦点等。您可以使用它来实现一些特定的交互逻辑或者在特定事件发生时执行一些自定义操作。 使用NotificationListener时,您需要指定一个Notification类的子类作为泛型参数,以指定您要监听的特定通知类型。然后,您可以重写onNotification方法,该方法会在接收到相应通知时被调用。 以下是一个使用NotificationListener的示例:

NotificationListener<ScrollNotification>(
  onNotification: (notification) {
    if (notification is ScrollStartNotification) {
      // 处理滚动开始事件
      return true;
    } else if (notification is ScrollUpdateNotification) {
      // 处理滚动更新事件
      return true;
    } else if (notification is ScrollEndNotification) {
      // 处理滚动结束事件
      return true;
    }
    return false;
  },
  child: ListView.builder(
    itemCount: 100,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
);
NotificationListener(
          onNotification: (ScrollNotification notification){
            if (notification is ScrollStartNotification) {
              // 处理滚动开始事件
              print("开始滚动...");
              return true;
            } else if (notification is ScrollUpdateNotification) {
              // 处理滚动更新事件
              print('正在滚动...可滚动的范围:${notification.metrics.maxScrollExtent},当前:${notification.metrics.pixels}');
              return true;
            } else if (notification is ScrollEndNotification) {
              // 处理滚动结束事件
              print('停止滚动....');
              return true;
            }
            return false;
          },
          child: ListView.builder(
            itemCount: 100,
            controller: _scrollController,
            itemBuilder: (BuildContext context, int index){
              return ListTile(
                leading: Icon(Icons.people),
                title: Text('Item ${index + 1}'),
              );
            },
          ),
        ),

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter是一种跨平台的移动应用开发框架,可以方便地创建漂亮且高性能的移动应用。滚动吸顶TabBar是指在页面滚动过程,TabBar能够固定在页面的顶部,以保持在用户视野内,并且随着页面的滚动而切换选项卡。 为了实现滚动吸顶TabBar,我们可以使用Flutter提供的ScrollController监听页面的滚动,并根据滚动的位置来决定TabBar的状态。 首先,我们需要创建一个ScrollController对象,并将其传递给滚动的可滚动组件(例如ListView、ScrollView等)的controller属性。 然后,我们可以使用ScrollController的addListener方法来监听滚动过程的位置变化。在listener,我们可以根据滚动的位置来判断是否需要将TabBar固定在顶部,或者将其恢复到正常位置。 具体的实现步骤如下: 1. 创建一个滚动控制器对象:ScrollController _scrollController = ScrollController(); 2. 将滚动控制器对象传递给可滚动组件的controller属性:ListView(controller: _scrollController, ...) 3. 在页面构建方法使用ScrollController的addListener方法:_scrollController.addListener(() { if (_scrollController.offset > 0) { // 需要吸顶处理 } else { // 恢复正常位置 } }); 4. 在需要吸顶处理的地方,将TabBar固定在顶部,例如将TabBar放在一个Stack组件,并设置其alignment属性为Alignment.topCenter。 5. 在需要恢复正常位置的地方,将TabBar恢复到原始位置。 通过以上的步骤,我们就可以实现滚动吸顶TabBar的效果了。需要注意的是,根据实际情况,可能还需要处理一些细节,例如切换选项卡时的动画效果等。可以根据具体需求进行相应的调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值