介绍
Scrollbar
Scrollbar
是一个Material风格的滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需将Scrollbar
作为可滚动组件的任意一个父级组件即可,如:
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中实现了点击导航栏回到顶部的功能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(), ), ), ); } }
如果要改成横向的