Flutter實(shí)戰(zhàn) SingleChildScrollView

SingleChildScrollView類似于 Android 中的ScrollView，它只能接收一個(gè)子組件。定義如下：

SingleChildScrollView({
  this.scrollDirection = Axis.vertical, //滾動(dòng)方向，默認(rèn)是垂直方向
  this.reverse = false, 
  this.padding, 
  bool primary, 
  this.physics, 
  this.controller,
  this.child,
})

除了上一節(jié)我們介紹過的可滾動(dòng)組件的通用屬性外，我們重點(diǎn)看一下reverse和primary兩個(gè)屬性：

• reverse：該屬性 API 文檔解釋是：是否按照閱讀方向相反的方向滑動(dòng)，如：scrollDirection值為Axis.horizontal，如果閱讀方向是從左到右(取決于語言環(huán)境，阿拉伯語就是從右到左)。reverse為true時(shí)，那么滑動(dòng)方向就是從右往左。其實(shí)此屬性本質(zhì)上是決定可滾動(dòng)組件的初始滾動(dòng)位置是在“頭”還是“尾”，取false時(shí)，初始滾動(dòng)位置在“頭”，反之則在“尾”，讀者可以自己試驗(yàn)。
• primary：指是否使用 widget 樹中默認(rèn)的PrimaryScrollController；當(dāng)滑動(dòng)方向?yàn)榇怪狈较颍?code>scrollDirection值為Axis.vertical）并且沒有指定controller時(shí)，primary默認(rèn)為true.

需要注意的是，通常SingleChildScrollView只應(yīng)在期望的內(nèi)容不會(huì)超過屏幕太多時(shí)使用，這是因?yàn)?code>SingleChildScrollView不支持基于 Sliver 的延遲實(shí)例化模型，所以如果預(yù)計(jì)視口可能包含超出屏幕尺寸太多的內(nèi)容時(shí)，那么使用SingleChildScrollView將會(huì)非常昂貴（性能差），此時(shí)應(yīng)該使用一些支持 Sliver 延遲加載的可滾動(dòng)組件，如ListView。

#示例

下面是一個(gè)將大寫字母 A-Z 沿垂直方向顯示的例子，由于垂直方向空間會(huì)超過屏幕視口高度，所以我們使用SingleChildScrollView：

class SingleChildScrollViewTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    return Scrollbar( // 顯示進(jìn)度條
      child: SingleChildScrollView(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: Column( 
            //動(dòng)態(tài)創(chuàng)建一個(gè)List<Widget>  
            children: str.split("") 
                //每一個(gè)字母都用一個(gè)Text顯示,字體為原來的兩倍
                .map((c) => Text(c, textScaleFactor: 2.0,)) 
                .toList(),
          ),
        ),
      ),
    );
  }
}

運(yùn)行效果如圖6-1所示：