草庐IT

Flutter - ScrollController 滚动监听及控制

a136447572 2023-05-29 原文

1 ScrollController


jumpTo(double offset)、animateTo(double offset,…):这两个方法用于跳转到指定的位置,它们不同之处在于,后者在跳转时会执行一个动画,而前者不会。

实例 点击按钮返回顶部 ,且按钮在list滑动一定距离后才会显示



重点1 在state 初始化是 监听_controller.addListener((){});
列表滑动大于1500 之后 显示返回顶部按钮
数据不够是 可点击按钮 "点击1"添加数据


void initState() {
  // TODO: implement initState
  super.initState();
  _controller.addListener(() {
    print(_controller.offset);
    if(_controller.offset<1500&&isShowTopBtn){
      setState(() {
        isShowTopBtn  = false;
      });
    }else if(_controller.offset>=1500&&!isShowTopBtn){
      setState(() {
        isShowTopBtn  = true;
      });
    }
  });
}
 	// 返回顶部的调用 _controller.animateTo
					Container(
              child: !isShowTopBtn?null:ElevatedButton(onPressed: (){
                _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
              }, child: Text("返回顶部")),
            ),

全部代码


class MyListViewState0 extends StatefulWidget {
  const MyListViewState0({Key? key}) : super(key: key);

  
  State<MyListViewState0> createState() => _MyState0();
}

class _MyState0 extends State<MyListViewState0> {

  int itemss = 1 ;
  List<String> list2 = [
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5"];
  final ScrollController _controller = ScrollController();
  bool isShowTopBtn = false ;


  
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller.addListener(() {
      print(_controller.offset);
      if(_controller.offset<1000&&isShowTopBtn){
        setState(() {
          isShowTopBtn  = false;
        });
      }else if(_controller.offset>=1000&&!isShowTopBtn){
        setState(() {
          isShowTopBtn  = true;
        });
      }
    });
  }


  
  Widget build(BuildContext context) {
    return ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: double.infinity),
        child: Column(

          children: <Widget>[
            ElevatedButton(onPressed: (){
              setState(() {
                print(_controller.offset);
                itemss ++ ;
                list2.insert(0, "-----------$itemss");
              });
            }, child: Text("点击1")),
            Container(
              child: !isShowTopBtn?null:ElevatedButton(onPressed: (){
                _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
              }, child: Text("返回顶部")),
            ),
            Expanded(child:  ListViewState2(list2,_controller))

          ],
        )
    );
  }
}

class ListViewState2 extends StatelessWidget{

  List<String> list = [] ;
  late ScrollController _controller ;
  late bool _isShowTopBtn ;

  ListViewState2(List<String> item, ScrollController controller,{Key? key}) : super(key: key){
    list = item ;
    _controller = controller;
  }

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scrollbar(child: ListView.builder(
        itemCount: list.length,
        itemExtent: 50,
        controller: _controller,
        itemBuilder: (BuildContext context ,int index){
          return Text(list[index]);
        }
    ));
  }
}

实例2 通过 NotificationListener 监听 可滚动组件的滑动情况

Flutter Widget树中子Widget可以通过发送通知(Notification)与父(包括祖先)Widget通信。父级组件可以通过NotificationListener组件来监听自己关注的通知,这种通信方式类似于Web开发中浏览器的事件冒泡,

可滚动组件在滚动时会发送ScrollNotification类型的通知,ScrollBar正是通过监听滚动通知来实现的。通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同:

通过NotificationListener可以在从可滚动组件到widget树根之间任意位置都能监听。而ScrollController只能和具体的可滚动组件关联后才可以。

收到滚动事件后获得的信息不同;NotificationListener在收到滚动事件时,通知中会携带当前滚动位置和ViewPort的一些信息,而ScrollController只能获取当前滚动位置。

NotificationListener<ScrollNotification>(
  onNotification: (ScrollNotification scrollNotification){
	}
 child:
)
// 通过   onNotification  监听
// 通过   child 配置子view
scrollNotification.metrics  // 可以获取到滑动的位置信息
scrollNotification.metrics.pixels // 当前位置
scrollNotification.metrics.maxScrollExtent // 总长度
...  // 其余的还需要再看看
class MyNotificationListenerWidget extends StatefulWidget {
  const MyNotificationListenerWidget({Key? key}) : super(key: key);

  
  State<MyNotificationListenerWidget> createState() => _MyNotificationListener();
}

class _MyNotificationListener extends State<MyNotificationListenerWidget> {
  String _progress = "0%"; //保存进度百分比

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollNotification){

        double pro = scrollNotification.metrics.pixels/scrollNotification.metrics.maxScrollExtent;

        setState(() {
          _progress = "${(pro*100).toInt()}%";
        });

        return true ;
      },
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            ListViewState3(),
            Positioned(
              child:  CircleAvatar(
              child:Text(_progress,style: TextStyle(fontSize: 18),),
              radius: 30,
              backgroundColor: Colors.black54,
              foregroundColor: Colors.blue[200],
            ),)
          ],
        ),
    );
  }
}
class ListViewState3 extends StatelessWidget{

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      prototypeItem: ListTile(title: Text("1")),
      itemCount: 56,
      itemBuilder: (context, index) {
        //LayoutLogPrint是一个自定义组件,在布局时可以打印当前上下文中父组件给子组件的约束信息
        return ListTile(title: Text("$index"));
      },
    );
  }
}

有关Flutter - ScrollController 滚动监听及控制的更多相关文章

  1. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时,出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem,并且我有rb-readline(0.4.2)(人们推荐的最少

  2. ruby-on-rails - 带 Spring 锁的 Rails 4 控制台 - 2

    我正在使用Ruby2.1.1和Rails4.1.0.rc1。当执行railsc时,它被锁定了。使用Ctrl-C停止,我得到以下错误日志:~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`gets':Interruptfrom~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`verify_server_version'from~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.

  3. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift,它运行良好,但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题?我尝试更新ruby​​gems,但它也给出了权限被拒绝的错误,我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  4. C51单片机——实现用独立按键控制LED亮灭(调用函数篇) - 2

    说在前面这部分我本来是合为一篇来写的,因为目的是一样的,都是通过独立按键来控制LED闪灭本质上是起到开关的作用,即调用函数和中断函数。但是写一篇太累了,我还是决定分为两篇写,这篇是调用函数篇。在本篇中你主要看到这些东西!!!1.调用函数的方法(主要讲语法和格式)2.独立按键如何控制LED亮灭3.程序中的一些细节(软件消抖等)1.调用函数的方法思路还是比较清晰地,就是通过按下按键来控制LED闪灭,即每按下一次,LED取反一次。重要的是,把按键与LED联系在一起。我打算用K1来作为开关,看了一下开发板原理图,K1连接的是单片机的P31口,当按下K1时,P31是与GND相连的,也就是说,当我按下去时

  5. ruby-on-rails - 在 Rails 控制台中使用 asset_path - 2

    在我的Character模型中,我添加了:字符.rbbefore_savedoself.profile_picture_url=asset_path('icon.png')end但是,对于数据库中已存在的所有角色,它们的profile_picture_url为nil。因此,我想进入控制台并遍历所有这些并进行设置。在我试过的控制台中:Character.find_eachdo|c|c.profile_picture_url=asset_path('icon.png')end但这给出了错误:NoMethodError:undefinedmethod`asset_path'formain:O

  6. ruby-on-rails - 带有 Pry 的 Rails 控制台 - 2

    当我进入Rails控制台时,我已将pry设置为加载代替irb。我找不到该页面或不记得如何将其恢复为默认行为,因为它似乎干扰了我的Rubymine调试器。有什么建议吗? 最佳答案 我刚发现问题,pry-railsgem。忘记了它的目的是让“railsconsole”打开pry。 关于ruby-on-rails-带有Pry的Rails控制台,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/question

  7. ruby - 将全局 $stdout 重新分配给控制台 - ruby - 2

    我正在尝试将$stdout设置为临时写入一个文件,然后返回到一个文件。test.rb:old_stdout=$stdout$stdout.reopen("mytestfile.out",'w+')puts"thisgoesinmytestfile"$stdout=old_stdoutputs"thisshouldbeontheconsole"$stdout.reopen("mytestfile1.out",'w+')puts"thisgoesinmytestfile1:"$stdout=old_stdoutputs"thisshouldbebackontheconsole"这是输出。r

  8. ruby-on-rails - Ruby 流量控制 : throw an exception, 返回 nil 还是让它失败? - 2

    我在思考流量控制的最佳实践。我应该走哪条路?1)不要检查任何东西并让程序失败(更清晰的代码,自然的错误消息):defself.fetch(feed_id)feed=Feed.find(feed_id)feed.fetchend2)通过返回nil静默失败(但是,“CleanCode”说,你永远不应该返回null):defself.fetch(feed_id)returnunlessfeed_idfeed=Feed.find(feed_id)returnunlessfeedfeed.fetchend3)抛出异常(因为不按id查找feed是异常的):defself.fetch(feed_id

  9. ruby-on-rails - ruby 新手,有人可以帮我从控制台破译这个错误吗? - 2

    我真的只是不确定这意味着什么或我应该做什么才能让网页在我的本地主机上运行。现在它只是显示一个错误,上面写着“我们很抱歉,但出了点问题。”当我运行railsserver并在chrome中打开localhost:3000时。这是控制台输出:StartedGET"/users/sign_in"for127.0.0.1at2013-07-0512:07:07-0400ProcessingbyDevise::SessionsController#newasHTMLCompleted500InternalServerErrorin55msNoMethodError(undefinedmethod`

  10. ruby-on-rails - Rails 控制台的 YAML 输出 - 2

    在Rails控制台中执行类似yGrau.all的命令时,我得到这些奇怪的!binary字符串而不是属性名称。知道如何解决这个问题吗?谢谢。irb(main):003:0>yGrau.all←[1m←[36mGrauLoad(0.0ms)←[0m←[1mSELECT"graus".*FROM"gr←[1m←[35mEXPLAIN(0.0ms)←[0mEXPLAINQUERYPLANSELECT"grauEXPLAINfor:SELECT"graus".*FROM"graus"0|0|0|SCANTABLEgraus(~1000000rows)----!ruby/object:Grauat

随机推荐