经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
Flutter学习笔记(24)--SingleChildScrollView滚动组件
来源:cnblogs  作者:CurtisWgh  时间:2019/8/28 8:37:37  对本文有异议

如需转载,请注明出处:Flutter学习笔记(24)--SingleChildScrollView滚动组件

在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做法通常就是使用ScrollView将内容包裹起来,如果不做可滑动的处理,Android上的表现为页面的部分内容无法展示,而在Flutter中,如果内容过多无法展示完全,屏幕的边界会给我们一个OVERFLOWED的警告提示,在Flutter中我们通常使用SingleChildScrollView处理滑动,这里需要注意的是,通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用,这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模式,所以如果预计视口可能包含超出屏幕尺寸太多的内容时使用SingleChildScrollView将会导致性能差的问题,此时应该使用一些支持Sliver延迟加载的可滚动组件,如ListView。

基于Sliver的延迟构建模式:

通常可滚动组件的子组件可能会非常多,占用的总高度也会非常大,如果要一次性将子组件全部构建出将会导致性能差的问题出现,为此,Flutter中提出一个Sliver(中文为"薄片"的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动组件可以将子组件分成好多个薄片(Sliver),只有当Sliver出现在视口时才会去构建它,这种模型也成为"基于Sliver的延迟构建模型"。可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,但是也有不支持该模型的,如SingleChildScrollView

 

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(DemoApp());
  3. class DemoApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. return new MaterialApp(
  7. title: 'SingleChildScrollView Demo',
  8. home: new Scaffold(
  9. appBar: AppBar(
  10. title: new Text('SingleChildScrollView Demo'),
  11. ),
  12. body: new Center(
  13. child: new Column(
  14. children: <Widget>[
  15. Container(
  16. width: 300.0,
  17. height: 200.0,
  18. color: Colors.blue,
  19. ),
  20. Container(
  21. width: 300.0,
  22. height: 200.0,
  23. color: Colors.yellow,
  24. ),
  25. Container(
  26. width: 300.0,
  27. height: 200.0,
  28. color: Colors.pink,
  29. ),
  30. Container(
  31. width: 300.0,
  32. height: 200.0,
  33. color: Colors.blue,
  34. ),
  35. Container(
  36. width: 300.0,
  37. height: 200.0,
  38. color: Colors.yellow,
  39. ),
  40. Container(
  41. width: 300.0,
  42. height: 200.0,
  43. color: Colors.pink,
  44. ),
  45. Container(
  46. width: 300.0,
  47. height: 200.0,
  48. color: Colors.blue,
  49. ),
  50. ],
  51. ),
  52. ),
  53. ),
  54. );
  55. }
  56. }

 

在Flutter实现页面滑动需要用到SingleChildScrollView组件,SingleChildScrollView和Android中ScrollView类似,都是只能接收一个子组件,先看一下SingleChildScrollView的源码:

  1. const SingleChildScrollView({
  2. Key key,
  3. //滚动方向,默认是垂直方向
  4. this.scrollDirection = Axis.vertical,
  5. //是否按照阅读方向相反的方向滑动
  6. this.reverse = false,
  7. //内容边距
  8. this.padding,
  9. //是否使用widget树中默认的PrimaryScrollController
  10. bool primary,
  11. //此属性接受一个ScrollPhysics类型的对象,它决定可以滚动如何响应用户操作,比如用户滑动完抬起手指后,继续执行动画,或者滑动到边界时,如何显示。
  12. //默认情况下,Flutter会根据具体平台分别使用不同的ScrollPhysics对象,对应不同的显示效果,如当滑动到边界时,继续拖动的话,在iOS上会出现弹性效果,
  13. //而在Android上会出现微光效果。如果你想在所有平台下使用同一种效果,可以显示指定一个固定的ScrollPhysics。
  14. //Flutter SDK包含两个ScrollPhysics的子类。1.ClampingScrollPhysics:Android下微光效果,2.BouncingScrollPhysics:iOS下弹性效果
  15. this.physics,
  16. //此属性接收一个ScrollController对象,ScrollController的主要作用是控制滚动位置和监听滚动事件。
  17. //默认情况下,Widget树中会有一个默认的PrimaryScrollController,如果子树中的可滚动组件没有显示的指定controller,并且primary属性值为true时,可滚动组件会使用这个默认的ScrollController。
  18. //这种机制带来的好处是父组件可以控制子树中可滚动的滚动行为,例:scaffold正是使用这种机制在iOS中实现了点击导航回到顶部的功能。
  19. this.controller,
  20. this.child,
  21. })

Demo示例:

  1. import 'package:flutter/material.dart';
  2. void main() => runApp(DemoApp());
  3. class DemoApp extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. return new MaterialApp(
  7. title: 'SingleChildScrollView Demo',
  8. home: new Scaffold(
  9. appBar: AppBar(
  10. title: new Text('SingleChildScrollView Demo'),
  11. ),
  12. body: new SingleChildScrollView(
  13. physics: BouncingScrollPhysics(),
  14. child: new Center(
  15. child: new Column(
  16. children: <Widget>[
  17. Container(
  18. width: 300.0,
  19. height: 200.0,
  20. color: Colors.blue,
  21. ),
  22. Container(
  23. width: 300.0,
  24. height: 200.0,
  25. color: Colors.yellow,
  26. ),
  27. Container(
  28. width: 300.0,
  29. height: 200.0,
  30. color: Colors.pink,
  31. ),
  32. Container(
  33. width: 300.0,
  34. height: 200.0,
  35. color: Colors.blue,
  36. ),
  37. Container(
  38. width: 300.0,
  39. height: 200.0,
  40. color: Colors.yellow,
  41. ),
  42. Container(
  43. width: 300.0,
  44. height: 200.0,
  45. color: Colors.pink,
  46. ),
  47. Container(
  48. width: 300.0,
  49. height: 200.0,
  50. color: Colors.blue,
  51. ),
  52. ],
  53. ),
  54. ),
  55. ),
  56. ),
  57. );
  58. }
  59. }

效果截图:

 

原文链接:http://www.cnblogs.com/upwgh/p/11419310.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号