【Flutter学习】可滚动组件之SingleChildScrollView

2024年1月2日 170次阅读

一，概述　　

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

 

点赞