Flutter SingleChildScrollView 滚动控件

Flutter中的SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件。

1、属性及含义

SingleChildScrollView({
  this.scrollDirection = Axis.vertical, //滚动方向，默认是垂直方向
  this.reverse = false, //决定可滚动组件的初始滚动位置是在“头”还是“尾”，false在“头”，true在“尾”
  this.padding, //内边距
  bool primary, //是否使用widget树中默认的`PrimaryScrollController`
  this.physics, //决定可滚动组件如何响应用户操作，滑动到边界时，出现弹性（ios）还是微光（android）
  this.controller,//接受一个ScrollController对象。ScrollController的主要作用是控制滚动位置和监听滚动事件。默认是PrimaryScrollController。
  this.child,//子控件，只能包含一个。
})

需要注意的是，通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模型，所以如果预计视口可能包含超出屏幕尺寸太多的内容时，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。

2、基本概念：基于Sliver的延迟构建

通常可滚动组件的子组件可能会非常多、占用的总高度也会非常大；如果要一次性将子组件全部构建出将会非常昂贵！为此，Flutter中提出一个Sliver（中文为”薄片“的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动可以将子组件分成好多个”薄片“（Sliver），只有当Sliver出现在视口中时才会去构建它，这种模型也称为”基于Sliver的延迟构建模型“。可滚动组件中有很多都支持基于Sliver的延迟构建模型，如ListView、GridView，但是也有不支持该模型的，如SingleChildScrollView。

3、示例

• 垂直滚动

下面是一个将大写字母A-Z沿垂直方向显示的例子。

    String str =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scaffold(
      // 显示进度条
      appBar: new AppBar(title: new Text("滚动控件")),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            //动态创建一个List<Widget>
            children: str
                .split("")
                //每一个字母都用一个Text显示,字体为原来的两倍
                .map((c) => Text(
                      c,
                      textScaleFactor: 2.0,
                    ))
                .toList(),
          ),
        ),
      ),
    );

垂直滚动效果图：

• 水平滚动

下面是一个将大写字母A-Z沿水平方向显示的例子。

   Widget build(BuildContext context) {
     String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ";
     return Scaffold(
       // 显示进度条
       appBar: new AppBar(title: new Text("滚动控件")),
       body: SingleChildScrollView(
         scrollDirection: Axis.horizontal,
         padding: EdgeInsets.all(16.0),
         child: Center(
           child: Row(
             //动态创建一个List<Widget>
             children: str
                 .split("")
                 //每一个字母都用一个Text显示,字体为原来的两倍
                 .map((c) => Text(
                       c,
                       textScaleFactor: 2.0,
                     ))
                 .toList(),
           ),
         ),
       ),
     );

水平滚动效果图：

4、ScrollController监听滚动

通过ScrollController可以监听SingleChildScrollView滚动。

简易监听示例：

         ScrollController mController = new ScrollController();
          mController.addListener(() {
            //监听滚动事件，打印滚动位置
            mController.addListener(() {
              print(mController.offset); //打印滚动位置
            });
          });

            SingleChildScrollView(
              ……
              controller: mController,
              child: ……
            ),

5、实现“回到顶部”功能

通过ScrollController监听SingleChildScrollView滚动，实现“回到顶部”功能。

• 完整示例 import 'package:flutter/material.dart'; class SingleChildScrollViewDemo extends StatefulWidget { @override SingleChildScrollViewDemoState createState() { return SingleChildScrollViewDemoState(); } } class SingleChildScrollViewDemoState extends State<SingleChildScrollViewDemo> { ScrollController mController = new ScrollController(); bool showToTopBtn = false; //是否显示“返回到顶部”按钮 @override void initState() { //监听滚动事件，打印滚动位置 mController.addListener(() { print(mController.offset); //打印滚动位置 if (mController.offset < 200 && showToTopBtn) { setState(() { showToTopBtn = false; }); } else if (mController.offset >= 200 && showToTopBtn == false) { setState(() { showToTopBtn = true; }); } }); } @override Widget build(BuildContext context) { String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ"; return Scaffold( // 显示进度条 appBar: new AppBar(title: new Text("滚动控件")), floatingActionButton: !showToTopBtn ? null : FloatingActionButton( child: Icon(Icons.arrow_upward), onPressed: () { //返回到顶部时执行动画 mController.animateTo(.0, duration: Duration(milliseconds: 200), curve: Curves.ease); }), body: Column( children: <Widget>[ Expanded( child: SingleChildScrollView( scrollDirection: Axis.vertical, padding: EdgeInsets.all(16.0), controller: mController, child: Center( child: Column( //动态创建一个List<Widget> children: str .split("") //每一个字母都用一个Text显示,字体为原来的两倍 .map((c) => Text( c, textScaleFactor: 2.0, )) .toList(), ), ), ), ) ], )); } } void main() { runApp(new MaterialApp( title: "滚动控件案例", theme: new ThemeData(primaryColor: Colors.deepOrangeAccent), home: new SingleChildScrollViewDemo(), )); }

“回到顶部”效果图：