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

 

点赞