1 ListView

  1. ListView({
  2.   ...  
  3.   //可滚动widget公共参数
  4.   Axis scrollDirection = Axis.vertical,
  5.   bool reverse = false,
  6.   ScrollController controller,
  7.   bool primary,
  8.   ScrollPhysics physics,
  9.   EdgeInsetsGeometry padding,
  11.   //ListView各个构造函数的共同参数  
  12.   double itemExtent,
  13.   bool shrinkWrap = false,
  14.   bool addAutomaticKeepAlives = true,
  15.   bool addRepaintBoundaries = true,
  16.   double cacheExtent,
  18.   //子widget列表
  19.   List<Widget> children = const <Widget>[],
  20. })
  • itemExtent：如果不为null，则会强制children的“长度”为itemExtent的值；这里的“长度”是指滚动方向上子组件的长度，也就是说如果滚动方向是垂直方向，则itemExtent代表子组件的高度；如果滚动方向为水平方向，则itemExtent就代表子组件的宽度。
  • shrinkWrap：该属性表示是否根据子组件的总长度来设置ListView的长度，默认值为false。默认情况下，ListView的会在滚动方向尽可能多的占用空间。当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。
  • addAutomaticKeepAlives：该属性表示是否将列表项（子组件）包裹在AutomaticKeepAlive组件中；典型地，在一个懒加载列表中，如果将列表项包裹在AutomaticKeepAlive中，在该列表项滑出视口时它也不会被GC（垃圾回收），它会使用KeepAliveNotification来保存其状态。如果列表项自己维护其KeepAlive状态，那么此参数必须置为false。
  • addRepaintBoundaries：该属性表示是否将列表项（子组件）包裹在RepaintBoundary组件中。当可滚动组件滚动时，将列表项包裹在RepaintBoundary中可以避免列表项重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效。和addAutomaticKeepAlive一样，如果列表项自己维护其KeepAlive状态，那么此参数必须置为false
  • ScrollDirection: 滚动方向
  • reverse：决定滚动方向是否与阅读方向一致
  • scrollController：控制滚动的位置
  • primary：当内容不足以滚动时，是否支持滚动；对于iOS系统还有一个效果：当用户点击状态栏时是否滑动到顶部。
  • ScrollPhysics：控制用户滚动视图的交互
    • AlwaysScrollableScrollPhysics:列表总是可滚动的。在iOS上会有回弹效果，在android上不会回弹。那么问题来了，如果primary设置为false（内容不足时不滚动），且 physics设置为AlwaysScrollableScrollPhysics，列表是否可以滑动？答案是可以，感兴趣的可以试一下
    • PageScrollPhysics：一般是给PageView控件用的滑动效果。如果listview设置的话在滑动到末尾时会有个比较大的弹起和回弹
    • ClampingScrollPhysics：滚动时没有回弹效果，同android系统的listview效果
    • NeverScrollableScrollPhysics：就算内容超过列表范围也不会滑动
    • BouncingScrollPhysics：不论什么平台都会有回弹效果
    • FixedExtentScrollPhysics：不适用于ListView，原因：需要指定scroller为FixedExtentScrollController,这个scroller只能用于ListWheelScrollViews。

ListView默认构造

适合只有少量的子组件的情况，因为这种方式需要将所有children都提前创建好（这需要做大量工作），而不是等到子widget真正显示的时候再创建

  1. ListView(
  2.   shrinkWrap: true, 
  3.   padding: const EdgeInsets.all(20.0),
  4.   children: <Widget>[
  5.     const Text('I\'m dedicating every day to you'),
  6.     const Text('Domestic life was never quite my style'),
  7.     const Text('When you smile, you knock me out, I fall apart'),
  8.     const Text('And I thought I was so smart'),
  9.   ],
  10. );

ListView.builder

@required IndexedWidgetBuilder itemBuilder 构建列表项

  • itemBuilder：它是列表项的构建器，类型为IndexedWidgetBuilder，返回值为一个widget。当列表滚动到具体的index位置时，会调用该构建器构建列表项。
  • itemCount：列表项的数量，如果为null，则为无限列表。
    1. ListView.builder(
    2.   itemCount: 100,
    3.   itemExtent: 50.0, //强制高度为50.0
    4.   itemBuilder: (BuildContext context, int index) {
    5.     return ListTile(title: Text("$index"));
    6.   }
    7. );

    ListView.custom

    ```dart ListView.custom(childrenDelegate: CustomSliverChildDelegate())

class CustomSliverChildDelegate extends SliverChildDelegate { /// 根据index构造child @override Widget build(BuildContext context, int index) { // KeepAlive将把所有子控件加入到cache，已输入的TextField文字不会因滚动消失 // 仅用于演示 return KeepAlive( keepAlive: true, child: TextField(decoration: InputDecoration(hintText: ‘请输入’))); }

/// 决定提供新的childDelegate时是否需要重新build。在调用此方法前会做类型检查，不同类型时才会调用此方法，所以一般返回true。 @override bool shouldRebuild(SliverChildDelegate oldDelegate) { return true; }

/// 提高children的count，当无法精确知道时返回null。 /// 当 build 返回 null时，它也将需要返回一个非null值 @override int get estimatedChildCount => 100;

/// 预计最大可滑动高度，如果设置的过小会导致部分child不可见，设置报错 @override double estimateMaxScrollOffset(int firstIndex, int lastIndex, double leadingScrollOffset, double trailingScrollOffset) { return 2500; }

/// 完成layout后的回调，可以通过该方法获取即将渲染的视图树包括哪些子控件 @override void didFinishLayout(int firstIndex, int lastIndex) { print(‘didFinishLayout firstIndex=$firstIndex firstIndex=$lastIndex’); } }

  1. <a name="DNLEf"></a>
  2. #### ListView.separated
  4. - itemBuilder构建列表项
  5. - separatorBuilder 构建分割组件
  7. ListView.separated可以在生成的列表项之间添加一个分割组件，它比ListView.builder多了一个separatorBuilder参数，该参数是一个分割组件生成器
  8. ```dart
  9. class ListView3 extends StatelessWidget {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     //下划线widget预定义以供复用。  
  13.     Widget divider1=Divider(color: Colors.blue,);
  14.     Widget divider2=Divider(color: Colors.green);
  15.     return ListView.separated(
  16.         itemCount: 100,
  17.         //列表项构造器
  18.         itemBuilder: (BuildContext context, int index) {
  19.           return ListTile(title: Text("$index"));
  20.         },
  21.         //分割器构造器
  22.         separatorBuilder: (BuildContext context, int index) {
  23.           return index%2==0?divider1:divider2;
  24.         },
  25.     );
  26.   }
  27. }
  1.     <br />

滚动效果的设置,通过physics属性

  1.         NeverScrollablePhysics (不滚动效果)<br />            BouncingScrollPhysics (ios风格的滚动效果)<br />            ClampingScrollPhysics (安卓风格滚动效果)<br />            FixedExtentScrollPhysics (固定范围的滚动效果)<br />应用代码
  1. ListView.separated(
  2.         itemCount: 100,
  3.         //列表项构造器
  4.         itemBuilder: (BuildContext context, int index) {
  5.           return ListTile(title: Text("$index"));
  6.         },
  7.         //分割器构造器
  8.         separatorBuilder: (BuildContext context, int index) {
  9.           return index%2==0?divider1:divider2;
  10.         },
  11.     )

2 GridView

[

](https://book.flutterchina.club/chapter6/gridview.html)

  1. GridView({
  2.   Axis scrollDirection = Axis.vertical,
  3.   bool reverse = false,
  4.   ScrollController controller,
  5.   bool primary,
  6.   ScrollPhysics physics,
  7.   bool shrinkWrap = false,
  8.   EdgeInsetsGeometry padding,
  9.   @required SliverGridDelegate gridDelegate, //控制子widget layout的委托
  10.   bool addAutomaticKeepAlives = true,
  11.   bool addRepaintBoundaries = true,
  12.   double cacheExtent,
  13.   List<Widget> children = const <Widget>[],
  14. })

SliverGridDelegate是一个抽象类，定义了GridViewLayout相关接口，子类需要通过实现它们来实现具体的布局算法。
Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent，我们可以直接使用SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法，其构造函数为:

  1. SliverGridDelegateWithFixedCrossAxisCount({
  2.   @required double crossAxisCount, 
  3.   double mainAxisSpacing = 0.0,
  4.   double crossAxisSpacing = 0.0,
  5.   double childAspectRatio = 1.0,
  6. })
  • crossAxisCount：横轴子元素的数量。此属性值确定后子元素在横轴的长度就确定了，即ViewPort横轴长度除以crossAxisCount的商。
  • mainAxisSpacing：主轴方向的间距。
  • crossAxisSpacing：横轴方向子元素的间距。
  • childAspectRatio：子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度。

GridView

  1. GridView(
  2.   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  3.       crossAxisCount: 3, //横轴三个子widget
  4.       childAspectRatio: 1.0 //宽高比为1时，子widget
  5.   ),
  6.   children:<Widget>[
  7.     Icon(Icons.ac_unit),
  8.     Icon(Icons.airport_shuttle),
  9.     Icon(Icons.all_inclusive),
  10.     Icon(Icons.beach_access),
  11.     Icon(Icons.cake),
  12.     Icon(Icons.free_breakfast)
  13.   ]
  14. );

GridView.count

  1. GridView.count( 
  2.   crossAxisCount: 3,
  3.   childAspectRatio: 1.0,
  4.   children: <Widget>[
  5.     Icon(Icons.ac_unit),
  6.     Icon(Icons.airport_shuttle),
  7.     Icon(Icons.all_inclusive),
  8.     Icon(Icons.beach_access),
  9.     Icon(Icons.cake),
  10.     Icon(Icons.free_breakfast),
  11.   ],
  12. );

GridView.extent

  1. GridView.extent(
  2.    maxCrossAxisExtent: 120.0,
  3.    childAspectRatio: 2.0,
  4.    children: <Widget>[
  5.      Icon(Icons.ac_unit),
  6.      Icon(Icons.airport_shuttle),
  7.      Icon(Icons.all_inclusive),
  8.      Icon(Icons.beach_access),
  9.      Icon(Icons.cake),
  10.      Icon(Icons.free_breakfast),
  11.    ],
  12.  );

GridView.builder

  1. /*
  2. GridView.builder(
  3.  ...
  4.  @required SliverGridDelegate gridDelegate, 
  5.  @required IndexedWidgetBuilder itemBuilder,
  6. )
  7. */
  8. class InfiniteGridView extends StatefulWidget {
  9.   @override
  10.   _InfiniteGridViewState createState() => new _InfiniteGridViewState();
  11. }
  13. class _InfiniteGridViewState extends State<InfiniteGridView> {
  15.   List<IconData> _icons = []; //保存Icon数据
  17.   @override
  18.   void initState() {
  19.     // 初始化数据  
  20.     _retrieveIcons();
  21.   }
  23.   @override
  24.   Widget build(BuildContext context) {
  25.     return GridView.builder(
  26.         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  27.             crossAxisCount: 3, //每行三列
  28.             childAspectRatio: 1.0 //显示区域宽高相等
  29.         ),
  30.         itemCount: _icons.length,
  31.         itemBuilder: (context, index) {
  32.           //如果显示到最后一个并且Icon总数小于200时继续获取数据
  33.           if (index == _icons.length - 1 && _icons.length < 200) {
  34.             _retrieveIcons();
  35.           }
  36.           return Icon(_icons[index]);
  37.         }
  38.     );
  39.   }
  41.   //模拟异步获取数据
  42.   void _retrieveIcons() {
  43.     Future.delayed(Duration(milliseconds: 200)).then((e) {
  44.       setState(() {
  45.         _icons.addAll([
  46.           Icons.ac_unit,
  47.           Icons.airport_shuttle,
  48.           Icons.all_inclusive,
  49.           Icons.beach_access, Icons.cake,
  50.           Icons.free_breakfast
  51.         ]);
  52.       });
  53.     });
  54.   }
  55. }

3 CustomScrollView

CustomScrollView才可以将多个Sliver”粘”在一起，这些Sliver共用CustomScrollView的Scrollable，所以最终才实现了统一的滑动效果

假设有一个页面，顶部需要一个GridView，底部需要一个ListView，而要求整个页面的滑动效果是统一的，即它们看起来是一个整体。如果使用GridView+ListView来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的，所以这时就需要一个”胶水”，把这些彼此独立的可滚动组件”粘”起来，而CustomScrollView的功能就相当于“胶水”。

  1. import 'package:flutter/material.dart';
  3. class CustomScrollViewTestRoute extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     //因为本路由没有使用Scaffold，为了让子级Widget(如Text)使用
  7.     //Material Design 默认的样式风格,我们使用Material作为本路由的根。
  8.     return Material(
  9.       child: CustomScrollView(
  10.         slivers: <Widget>[
  11.           //AppBar，包含一个导航栏
  12.           SliverAppBar(
  13.             pinned: true,
  14.             expandedHeight: 250.0,
  15.             flexibleSpace: FlexibleSpaceBar(
  16.               title: const Text('Demo'),
  17.               background: Image.asset(
  18.                 "./images/avatar.png", fit: BoxFit.cover,),
  19.             ),
  20.           ),
  22.           SliverPadding(
  23.             padding: const EdgeInsets.all(8.0),
  24.             sliver: new SliverGrid( //Grid
  25.               gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
  26.                 crossAxisCount: 2, //Grid按两列显示
  27.                 mainAxisSpacing: 10.0,
  28.                 crossAxisSpacing: 10.0,
  29.                 childAspectRatio: 4.0,
  30.               ),
  31.               delegate: new SliverChildBuilderDelegate(
  32.                     (BuildContext context, int index) {
  33.                   //创建子widget      
  34.                   return new Container(
  35.                     alignment: Alignment.center,
  36.                     color: Colors.cyan[100 * (index % 9)],
  37.                     child: new Text('grid item $index'),
  38.                   );
  39.                 },
  40.                 childCount: 20,
  41.               ),
  42.             ),
  43.           ),
  44.           //List
  45.           new SliverFixedExtentList(
  46.             itemExtent: 50.0,
  47.             delegate: new SliverChildBuilderDelegate(
  48.                     (BuildContext context, int index) {
  49.                   //创建列表项      
  50.                   return new Container(
  51.                     alignment: Alignment.center,
  52.                     color: Colors.lightBlue[100 * (index % 9)],
  53.                     child: new Text('list item $index'),
  54.                   );
  55.                 },
  56.                 childCount: 50 //50个列表项
  57.             ),
  58.           ),
  59.         ],
  60.       ),
  61.     );
  62.   }
  63. }
  64. /*
  65. * 头部SliverAppBar：SliverAppBar对应AppBar，
  66.     两者不同之处在于SliverAppBar可以集成到CustomScrollView。
  67.   SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型
  68. * 中间的SliverGrid：它用SliverPadding包裹以给SliverGrid添加补白。
  69.     SliverGrid是一个两列，宽高比为4的网格，它有20个子组件。
  70. * 底部SliverFixedExtentList：它是一个所有子元素高度都为50像素的列表。
  71. */
  1.     <br />

4 SliverGrid

delegate

SliverChildDelegate 系统提供个两个已经实现好的代理：SliverChildListDelegate/SliverChildBuilderDelegate

gridDelegate

SliverGridDelegate 系统提供个两个已经实现好的代理：SliverGridDelegateWithFixedCrossAxisCount、SliverGridDelegateWithMaxCrossAxisExtent

  1.   _mySliverAppBar() {
  2.     return SliverAppBar(
  3.       title: Text('SliverGrid'),
  4.       expandedHeight: 250,
  5.       flexibleSpace: FlexibleSpaceBar(
  6.         background: Image.network(
  7.           ImageUrlConstant.imageUrl1,
  8.           fit: BoxFit.cover,
  9.         ),
  10.         collapseMode: CollapseMode.parallax,
  11.       ),
  12.     );
  13.   }
  15.   _mySliverChildBuilderDelegate() {
  16.     return SliverChildBuilderDelegate(
  17.       (BuildContext context, int index) {
  18.         return Container(
  19.           height: 50,
  20.           color: Colors.primaries[index % 8],
  21.         );
  22.       },
  23.       childCount: 10,
  24.     );
  25.   }
  27.   _mySliverGridDelegateWithFixedCrossAxisCount() {
  28.     return SliverGridDelegateWithFixedCrossAxisCount(
  29.       crossAxisCount: 2,
  30.       mainAxisSpacing: 10,
  31.       crossAxisSpacing: 5,
  32.       childAspectRatio: 1.5,
  33.     );
  34.   }
  36.   _mySliverGridDelegateWithMaxCrossAxisExtent() {
  37.     return SliverGridDelegateWithMaxCrossAxisExtent(
  38.       maxCrossAxisExtent: 200,
  39.       mainAxisSpacing: 10,
  40.       crossAxisSpacing: 5,
  41.       childAspectRatio: 1,
  42.     );
  43.   }
  45.   @override
  46.   Widget build(BuildContext context) {
  47.     return Container(
  48.       color: Colors.white,
  49.       child: CustomScrollView(
  50.         slivers: [
  51.           _mySliverAppBar(),
  52.           SliverGrid(
  53.             delegate: _mySliverChildBuilderDelegate(),
  54.             gridDelegate: _mySliverGridDelegateWithFixedCrossAxisCount(),
  55.             // gridDelegate: _mySliverGridDelegateWithMaxCrossAxisExtent(),
  56.           ),
  57.         ],
  58.       ),
  59.     );
  60.   }

5 SliverList

SliverListz原型

  1. const SliverList({
  2.     Key key,
  3.     @required SliverChildDelegate delegate,
  4.   }) : super(key: key, delegate: delegate);

SliverList的使用：

  1. class _SliverListFulState extends State<SliverListFul> {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return MaterialApp(
  5.       home: Scaffold(
  6.           appBar: AppBar(
  7.             title: Text("SliverList学习"),
  8.           ),
  9.           body:CustomScrollView(
  10.             slivers: [
  11.               SliverList(
  12.                 delegate: SliverChildBuilderDelegate((content, index) {
  13.                   return Container(
  14.                     height: 65,
  15.                     color: Colors.primaries[index % Colors.primaries.length],
  16.                   );
  17.                 }, childCount: 20),
  18.               ),
  19.             ],
  20.           )
  22.           ),
  23.     );
  24.   }
  25. }

6 SliverSafeArea

image.png
顶部有一部分被刘海屏遮挡住了，解决此问题的方法是将SliverGrid包裹在SliverSafeArea中：

  1. CustomScrollView(
  2.   slivers: <Widget>[
  3.     SliverSafeArea(
  4.       sliver: SliverGrid(
  5.         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  6.             crossAxisCount: 3, crossAxisSpacing: 5, mainAxisSpacing: 3),
  7.         delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
  8.           return Container(
  9.             color: Colors.primaries[index % Colors.primaries.length],
  10.           );
  11.         }, childCount: 20),
  12.       ),
  13.     )
  14.   ],
  15. )

image.png

7 SingleChildScrollView

里面只能嵌套一个组件,eg : Column,Row

  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. })

使用案例

  1. SingleChildScrollView(
  2.         child: new Column(
  3.           mainAxisAlignment: MainAxisAlignment.spaceBetween,
  4.           crossAxisAlignment: CrossAxisAlignment.center,
  5.             children: <Widget>[
  6.               new Container(
  7.                 child: new Column(
  8.                   children: <Widget>[
  9.                     new TextField(
  10.                       decoration: const InputDecoration(
  11.                         labelText: "Description",
  12.                       ),
  13.                       style: Theme.of(context).textTheme.title,
  14.                       ),
  15.                     new TextField(
  16.                       decoration: const InputDecoration(
  17.                         labelText: "Description",
  18.                       ),
  19.                       style: Theme.of(context).textTheme.title,
  20.                     ),
  21.                     new TextField(
  22.                       decoration: const InputDecoration(
  23.                         labelText: "Description",
  24.                       ),
  25.                       style: Theme.of(context).textTheme.title,
  26.                     ),
  27.                   ],
  28.                 )
  29.               ),
  30.               new Container(
  31.                 margin: new EdgeInsets.only(bottom: 16.0),
  32.                 child: new FloatingActionButton(
  33.                   backgroundColor: new Color(0xFFE57373),
  34.                   child: new Icon(Icons.check),
  35.                   onPressed: (){}
  36.                 ),                    
  37.               )
  38.             ],
  39.         ),
  40.       )