Flutter 学习之旅(十六) 可滚动控件Scrolla

作者: Tsm_2020 | 来源:发表于2020-08-18 15:39 被阅读0次

Flutter 学习之旅(十六) 可滚动控件Scrolla
Flutter 学习之旅(十九) 可滚动控件 GridVi
Flutter 学习之旅(二十) 可滚动控件 ListVi
Flutter 学习之旅(十八) 可滚动控件 Single
Flutter 学习之旅(十七) 可滚动控件ScrollV
Flutter Widget--ListView 学习
Flutter 滚动监听及实战appBar滚动渐变
Flutter 学习 - 可滚动的 Widget
flutter widget 控件
Flutter学习笔记21-可滚动组件

讲到滚动控件大家可能都比较熟悉的ListView 与 GridView ,
在flutter 中ListView 与GridView 都是继承自BoxScrollView,而 BoxScrollView 继承自ScrollView,
如果想要为一个控件添加可滚动状态,必须要包含一个组件Scrollable,这种继承关系在源码中非常简单就能找到

image.png

那我们就自上而下的开始分析先来看一下Scrollable 的属性介绍

Scrollable

Scrollable({
    Key key,
    ///滚动方向
    this.axisDirection = AxisDirection.down,
    ///滚动控制器和事件监听
    ///在源码中是这样介绍的  ScrollController.initialScrollOffset  控制初始滚动的位置
    ///ScrollController.keepScrollOffset  控制是否应该自动在[PageStorage]中保存并恢复其滚动位      
    ///置
    ///ScrollController.offset 用来读取当前滚动位置
    this.controller,
    ///决定widget 在用户完成拖拽后的动画响应默认情况下会更护不同环境设置不同的变量
    ///ClampingScrollPhysics  android 使用的水波纹效果
    ///BouncingScrollPhysics：iOS下弹性效果  如果android 想要实现这个效果
    ///子布局高度的综合必须大于listview 的实际高度度即viewport
    this.physics,
    ///  用于生成子布局   类似android 中adapter 的getItem 方法
    @required this.viewportBuilder,
    ///
    this.incrementCalculator,
    /// 是否公开在语义数中,便于类似talkback的软件识别
    this.excludeFromSemantics = false,
    ///语义子集数
    this.semanticChildCount,
    ///处理拖动开始行为的方式与时机 
    ///有两个值 DragStartBehavior.start  DragStartBehavior.down 
    ///从字面理解就   start是从拖动开始,down是从触摸事件按下开始
    this.dragStartBehavior = DragStartBehavior.start,
  })

重要属性

axisDirection

控制滑动方向,必须一个listview想要从垂直滑动变换到水平滑动改一下这个属性就好了

controller

非常重要的属性,如果想要监听listview 的滑动偏移量和滚动到哪个条目都可以用它来实现,
但是这里面有个比较坑的地方就是controller.animateTo()他的入参是偏移量,如果你想要准确滑动的某一个条目,就需要自己去计算了,如果条目不规则,你就要计算多个了,
这里说一个比较常用的方法,

/// 创建controller 的时候可以指定 offset 偏移量,不是偏移的条目数,就是偏移的距离,单位像素
ScrollController(initialScrollOffset: 50,keepScrollOffset: true)

///同时你也可以获取他的offset
var offset=_controller.offset  ;

//controller 内部实现逻辑写这个只是为了证明offset的单位是像素
double get offset => position.pixels;

/// 为controller 添加滑动监听,源码中这样介绍的,如果没有添加任何监听,你可以忽略他,
///在控件dispose之后.你不能再调用他了,意思就是想要移出就必要在dispose之前,
///如果同一个监听,你添加了两次,那么你就必须移出两次,否则还是会有消息回来,
_controller.addListener(lis);

///移出消息监听
 _controller?.removeListener(lis);
 ///消息监听的方法,打印一下偏移量和position  
  void lis(){
    printString('offset:${_controller.offset}     positon:${_controller.position}');
  }
///controller 还可以控制滚动到固定位置,入参都是偏移量,不是item的position  
 _controller.animateTo(offset, duration: null, curve: null);////有动画
 _controller.jumpTo(value);///无动画

physics

决定widget 在用户完成拖拽后的动画响应,默认情况下会根据不同环境设置不同的变量
ClampingScrollPhysics android 使用的水波纹效果
BouncingScrollPhysics：iOS下弹性效果如果android 想要实现这个效果
子布局高度的总和必须大于listview 的实际高度度即viewport
这里试验一下指定BouncingScrollPhysics

下面用ListView 举个例子

Scaffold(
      appBar: AppBar(
        title: Text('主页 ListView 属性'),
        centerTitle: true ,
      ),
      floatingActionButton: FloatingActionButton(
        child: inflateText("跳跃", Colors.white, 15),
        onPressed:(){
          _controller.animateTo(100, duration: Duration(milliseconds: 500), curve: Curves.ease);
        },
      ),
      body: Container(
        color: Colors.white,
        child: ListView.builder(
          ///类似ios 月结回弹的效果,但是需要列表的长度必须沾满他的viewport
          ///也就是子布局高度的总和必须大于listview 的实际高度度
          physics: BouncingScrollPhysics(),
          controller: _controller,
          scrollDirection: _direction,
          itemBuilder: (BuildContext, int) => Container(
              child: RaisedButton(
                child: Center(
                  child: Text(
                    list[int],
                    style: TextStyle(color: Colors.black87, fontSize: 16),
                  ),
                ),
                onPressed: () {
                  _onPressedItem(context, int);
                },
              )),
          itemCount: list.length,
        ),
      ),
    );
  }

  Future<void> _onPressedItem(BuildContext context, int index) async {
    switch (index) {
      case 0:
        Navigator.of(context).pushNamed(page_routes_scaffold);
        break;
      case 1:
        Navigator.of(context).pushNamed(page_routes_appbar);
        break;
      case 2:
        Navigator.of(context).pushNamed(page_routes_container);
        break;
      case 3:
        Navigator.of(context).pushNamed(page_routes_row_and_column);
        break;
      case 4:
        Navigator.of(context).pushNamed(page_routes_text);
        break;
      case 5:
        Navigator.of(context).pushNamed(page_routes_text_field);
        break;
      case 6:
        Navigator.of(context).pushNamed(page_routes_raised_button);
        break;
      case 7:
        Navigator.of(context).pushNamed(page_routes_icon);
        break;
      case 8:
        [Permission.storage, Permission.camera].request()
          ..then((value) {
            if (value[Permission.storage].isGranted) {
              if (value[Permission.camera].isGranted) {
                Navigator.of(context).pushNamed(page_routes_iamge);
              }
            }
          });
        //还有一种写法是
//      var result = await Permission.storage.request();
//      if (result.isGranted) {
//        Navigator.of(context).pushNamed(page_routes_iamge);
//      }
        break;

      case 9:///切换方向
        setState(() {
          if(_direction==Axis.vertical){
            _direction=Axis.horizontal;
          }else{
            _direction=Axis.vertical;
          }
        });
        break;
    }
  }
}