滚动监听_【Flutter】 SingleChildScrollView单个组件的滚动组件

说明

当遇到内容较多时，需要滚动组件进行展示，SingleChildScrollView是一个只能包含单个组件的滚动组件，如果内容较多，建议使用ListView等，因为SingleChildScrollView没有“懒加载”模式，性能不如ListView。

常用属性说明

• 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：子元素

示例演示

import 'package:flutter/material.dart';

class SingleChildScrollViewDemo extends StatefulWidget {
  @override
  StatecreateState() {
    return SingleChildScrollViewDemoState();
  }
}

class SingleChildScrollViewDemoState extends State<SingleChildScrollViewDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Demo"),
      ),
      body: SingleChildScrollView(
// scrollDirection: Axis.horizontal,
        reverse: false,
        padding: EdgeInsets.all(8),
        child: Container(
          color: Colors.red,
          height: 1500,
          alignment: Alignment.center,
          width: double.infinity,
          child: Text(
            "码\n上\n加\n油\n站\n，\n一\n起\n来\n加\n油\n吧\n，\n学\n习\nFLutter!",
            style: TextStyle(fontSize: 28),
          ),
        ),
      ),
    );
  }
}

效果：

完

  码上加油站

  一起来加油

长按扫码关注

点“在看”你懂得