Flutter組件學習（17）SingleChildScrollView

介紹

Scrollbar

Scrollbar是一個Material風格的滾動指示器（滾動條），如果要給可滾動組件添加滾動條，只需將Scrollbar作爲可滾動組件的任意一個父級組件即可，如：

Scrollbar(
  child: SingleChildScrollView(
    ...
  ),
);

CupertinoScrollbar

CupertinoScrollbar是iOS風格的滾動條，如果你使用的是Scrollbar，那麼在iOS平臺它會自動切換爲CupertinoScrollbar。

 SingleChildScrollView

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

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

reverse	true初始默認滑動在列表底部，false在列表頂部
primary	是否使用widget樹中默認的PrimaryScrollController； 當滑動方向爲垂直方向（scrollDirection值爲Axis.vertical）並且沒有指定controller時，primary默認爲true
axisDirection	滾動方向 scrollDirection: Axis.horizontal  此時子控件必須是橫向的Row scrollDirection: Axis.vertical此時子控件必須是縱向的Column
physics	接受一個ScrollPhysics類型的對象，它決定可滾動組件如何響應用戶操作， 比如用戶滑動完擡起手指後，繼續執行動畫；或者滑動到邊界時，如何顯示。 默認情況下，Flutter會根據具體平臺分別使用不同的ScrollPhysics對象， 應用不同的顯示效果，如當滑動到邊界時，繼續拖動的話， 在iOS上會出現彈性效果，而在Android上會出現微光效果。 如果你想在所有平臺下使用同一種效果，可以顯式指定一個固定的ScrollPhysics， Flutter SDK中包含了兩個ScrollPhysics的子類，他們可以直接使用： ClampingScrollPhysics：Android下微光效果。 BouncingScrollPhysics：iOS下彈性效果。
controller	接受一個ScrollController對象。 ScrollController的主要作用是控制滾動位置和監聽滾動事件。 默認情況下，Widget樹中會有一個默認的PrimaryScrollController， 如果子樹中的可滾動組件沒有顯式的指定controller，並且primary屬性值爲true時（默認就爲true）， 可滾動組件會使用這個默認的PrimaryScrollController。 這種機制帶來的好處是父組件可以控制子樹中可滾動組件的滾動行爲， 例如，Scaffold正是使用這種機制在iOS中實現了點擊導航欄回到頂部的功能

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SingleChildScrollView練習'),
          textTheme:
          TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)),
          backgroundColor: Colors.red,
        ),
        body: ClipTest(),
      ),
    );
  }
}

class ClipTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    List<String>list=new List();
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }

    return Scrollbar(//顯示進度條
      child: SingleChildScrollView(
        reverse: false,
//        primary: true,
        scrollDirection: Axis.vertical,
        padding: EdgeInsets.all(10),
        child: Column(
          children: list.map(
                  (var c)=>Text(
                c,
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.blue,
                ),
              )
          ).toList(),
        ),
      ),
    );
  }
}