美文网首页Flutter
Flutter 初始化ListView定位子组件位置

Flutter 初始化ListView定位子组件位置

作者: 鹿蜀先生191 | 来源:发表于2020-08-13 16:59 被阅读0次
    一、概述

    在开发过程中,我遇到了一个问题:PDF阅读,横屏切换为竖屏时,需要定位到横屏当前阅读的页码,而在竖屏页使用了LIstView滑动组件,所以初始化显示时就需要定位到当前阅读页码。

    二、原理

    根据横屏页面的页码,确定LIstView的初始滑动偏移量,然后使用定位方法_offsetController.position.moveTo(double)定位至这个值即可。

    三、实现

    首先需要获取滑动偏移量

      ScrollController _offsetController= ScrollController(); //定义ListView的controller
      var oldOffset; //定义初始滑动偏移量
    
    if(!mounted) return;
                          setState(() {
                            _isVertical = !_isVertical;
                            oldOffset=(_pageNumber-1)*(screenHeight-90.px); //获取滑动偏移量
                            //在页面生命周期build结束之后,回调此方法进行定位
                            WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                              _offsetController.position.moveTo(oldOffset);
                            });
                          });
    

    完成了横屏至竖屏的跳转,接着就是完成竖屏至横屏的跳转,也是根据滑动偏移量进行处理:

     @override
      void initState(){
        super.initState();
        //添加滑动监听
        _offsetController.addListener(() {
       //向下滑动超过一个页面的长度则_pageNumberr+1,反之减一
          if((_offsetController.offset-oldOffset)>=(screenHeight-90.px)){
           setState(() {
             oldOffset=_offsetController.offset.toInt();
             _pageNumber++;
           });
          }else if((oldOffset-_offsetController.offset)>=(screenHeight-90.px)){
            setState(() {
              oldOffset=_offsetController.offset.toInt();
              _pageNumber--;
            });
          }
        });
      }
    

    或者更简单

      @override
      void initState() {
        super.initState();
        _controller.addListener(_calcOffsetPosition);
      }
    
      _calcOffsetPosition() {
        _currentIndex = _controller.offset ~/ (screenHeight - 90.px);
      }
    

    至此,就完成了LIstView的定位,实现横竖屏切换PDF阅读的功能。

    相关文章

      网友评论

        本文标题:Flutter 初始化ListView定位子组件位置

        本文链接:https://www.haomeiwen.com/subject/tlxcrktx.html