【Flutter】可滾動組件之SingleChildScrollView

前言

SingleChildScrollView類似於Android中的ScrollView，它只能接收一個子組件。

接口描述

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);

代碼示例

// 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(),
              ),
            ),
          ),
        )
    );

  }
}

總結

需要注意的是，通常SingleChildScrollView只應在期望的內容不會超過屏幕太多時使用，這是因為SingleChildScrollView不支持基於Sliver的延遲實例化模型，所以如果預計視口可能包含超出屏幕尺寸太多的內容時，那么使用SingleChildScrollView將會非常昂貴（性能差），此時應該使用一些支持Sliver延遲加載的可滾動組件，如ListView。