【Flutter學習】可滾動組件之SingleChildScrollView

一，概述　　

　　SingleChildScrollView類似於Android中的ScrollView，它只能接收一個子Widget。定義如下：

二，構造函數

const SingleChildScrollView({
  Key key,
  this.scrollDirection = Axis.vertical,
  this.reverse = false,
  this.padding,
  bool primary,
  this.physics,
  this.controller,
  this.child,
  this.dragStartBehavior = DragStartBehavior.down,
}) : 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);

三，參數解析

• key：當前元素的唯一標識符(類似於 Android 中的 id)
• scrollDirection：滾動方向，默認是垂直
• reverse：是否按照閱讀方向相反的方向滑動。
• padding：填充距離
• primary：是否使用 widget 樹中默認的 PrimaryScrollController 。當滑動方向為垂直方向（scrollDirection值為Axis.vertical）並且controller沒有指定時，primary默認為true
• physics：此屬性接受一個ScrollPhysics對象，它決定可滾動Widget如何響應用戶操作，比如用戶滑動完抬起手指后，繼續執行動畫；或者滑動到邊界時，如何顯示。默認情況下，Flutter會根據具體平台分別使用不同的ScrollPhysics對象，應用不同的顯示效果，如當滑動到邊界時，繼續拖動的話，在iOS上會出現彈性效果，而在Android上會出現微光效果。如果你想在所有平台下使用同一種效果，可以顯式指定，Flutter SDK中包含了兩個ScrollPhysics的子類可以直接使用： ClampingScrollPhysics→Android下微光效果 / BouncingScrollPhysics→iOS下彈性效果
• controller：此屬性接受一個ScrollController對象。ScrollController的主要作用是控制滾動位置和監聽滾動事件
• child：子元素

四，示例demo　　

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SingleChildScrollViewWidget(),
    );
  }
}

class SingleChildScrollViewWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _StackState();
  }  
}

class _StackState extends State<SingleChildScrollViewWidget> {
  String numberStr = "12345678909876543210123456789";
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home:  new Scaffold(
        //AppBar
        appBar: new AppBar(
          title: new Text('ScroollWidget'),
        ),
        //Body
        body: new Scrollbar(
          child: new SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: new Center(
              child: new Row(
                children:numberStr.split("").map((c) => Text(c, textScaleFactor: 2.0,)).toList(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}