Flutter组件学习（17）SingleChildScrollView


介绍

Scrollbar

Scrollbar是一个Material风格的滚动指示器（滚动条），如果要给可滚动组件添加滚动条，只需将Scrollbar作为可滚动组件的任意一个父级组件即可，如：

1
2
3
4
5
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中实现了点击导航栏回到顶部的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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(),
        ),
      ),
    );
  }
}