【Flutter之旅】可滚动组件介绍

可滚动组件介绍

环境介绍以及参考文献

本示例是在 Linux 16.04.1-Ubuntu 搭配 VS Code 使用。

《Flutter实战》电子书
Flutter中文网

可滚动组件简介

当组件内容超过当前显示视口(ViewPort)时，如果不做处理，Flutter 会提示 Overflow 错误。

针对 overflow 问题，flutter 提供了可滚动组件去显示长列表和长布局。

可滚动组件的核心组件 Scrollable

Scrollable({
  //...
  this.axisDirection = AxisDirection.down, // 滚动方向
  this.controller, // 接受 ScrollController 对象，控制滚动位置和监听滚动事件
  this.physics, // 接受 ScrollPhysics 对象，响应用户操作。
  @required this.viewportBuilder, // 后面介绍
})

基于Sliver的延迟构建

因为可滚动组件的子组件可能会非常多，如果一次性将全部子组件构建出来会非常耗费内存。因此 Flutter 提出一个 Sliver 的概念，一个可滚动组件如果支持 Sliver 模型，那么该滚动可以将子组件分成多个 Sliver， 只有当 Sliver 出现在 ViewPort 时才去构建它。

SingleChildScrollView

类似于 Android 中的 ScrollView。不支持 Sliver 的延迟实例化模型，因此只适合不太多的内容。

class SingleChildScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scrollbar( // 显示进度条
      child: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: Column( 
            //动态创建一个List<Widget>  
            children: str.split("") 
                //每一个字母都用一个Text显示,字体为原来的两倍
                .map((c) => Text(c, textScaleFactor: 2.0,)) 
                .toList(),
          ),
        ),
      ),
    );
  }
}

ListView

可以沿一个方向线性排布所有子组件，支持 Sliver 的延迟实例化模型。

实现一个可以自加载数据的 listview，并设置 listview 的标题，在 listview 滚