美文网首页flutter
Flutter学习笔记22-SingleChildScrollV

Flutter学习笔记22-SingleChildScrollV

作者: zombie | 来源:发表于2020-10-28 15:42 被阅读0次

SingleChildScrollView只能接收一个子组件。源码如下:

SingleChildScrollView({
  this.scrollDirection = Axis.vertical, //滚动方向,默认是垂直方向
  this.reverse = false, 
  this.padding, 
  bool primary, 
  this.physics, 
  this.controller,
  this.child,
})
  • reverse
    是否按照阅读方向相反的方向滑动,如:scrollDirection值为Axis.horizontal,如果阅读方向是从左到右(取决于语言环境,阿拉伯语就是从右到左)。reverse为true时,那么滑动方向就是从右往左。其实此属性本质上是决定可滚动组件的初始滚动位置是在“头”还是“尾”,取false时,初始滚动位置在“头”,反之则在“尾” 。
  • primary
    是否使用widget树中默认的PrimaryScrollController;当滑动方向为垂直方向(scrollDirection值为Axis.vertical)并且没有指定controller时,primary默认为true。

因为SingleChildScrollView不支持基于Sliver的延迟实例化模型,SingleChildScrollView只应在内容不会超过屏幕太多时使用,所以如果预计视口可能包含超出屏幕尺寸太多的内容时,那么使用SingleChildScrollView性能很差,应该使用一些支持Sliver延迟加载的可滚动组件,如ListView。代码示例:

class SingleChildScrollViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String str = "123456789987654321";
    // 显示进度条
    return Scrollbar(
      child: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            // 动态创建一个List<Widget>
            children: str
                .split("")
                .map((c) => Text(c, textScaleFactor: 2.0))
                .toList(),
          ),
        ),
      ),
    );
  }
}
代码运行效果图:

代码传送门

相关文章

网友评论

    本文标题:Flutter学习笔记22-SingleChildScrollV

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