Flutter scrollable component: SingleChildScrollView

Foreword

SingleChildScrollView similar in Android ScrollView, it can receive a sub-assembly.

Interface Description

const SingleChildScrollView({
    Key key,
    this.scrollDirection = Axis.vertical,
    // 是否按照阅读方向相反的方向滑动，如：scrollDirection值为Axis.horizontal，如果阅读方向是从左到右(取决于语言环境，阿拉伯语就是从右到左)。
    // reverse为true时，那么滑动方向就是从右往左。其实此属性本质上是决定可滚动组件的初始滚动位置是在“头”还是“尾”，取false时，初始滚动位置在“头”，反之则在“尾”。
    this.reverse = false,
    this.padding,
    // 指是否使用widget树中默认的PrimaryScrollController；当滑动方向为垂直方向（scrollDirection值为Axis.vertical）并且没有指定controller时，primary默认为true.
    bool primary,
    this.physics,
    this.controller,
    this.child,
    this.dragStartBehavior = DragStartBehavior.start,
  }) : assert(scrollDirection != null),
       assert(dragStartBehavior != null),
       assert(!(controller != null && primary == true),
          'Primary ScrollViews obtain their ScrollController via inheritance from a PrimaryScrollController widget. '
          'You cannot both set primary to true and pass an explicit controller.'
       ),
       primary = primary ?? controller == null && identical(scrollDirection, Axis.vertical),
       super(key: key);

The sample code

// SingleChildScrollView

// 它类似于Android中的ScrollView，它只能接受一个子组件

// 将大写字母A-Z0123456789沿垂直方向显示
import 'package:flutter/material.dart';

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

  }
}

to sum up

It should be noted that, in general SingleChildScrollView should be used only when the desired content does not exceed the screen too much, because SingleChildScrollView does not support Sliver delay instantiation model, so if you expect viewport may contain too much content beyond the screen size when then use SingleChildScrollView will be very expensive (poor performance), then you should use some support Sliver lazy loading scrollable components, such as ListView.