Flutter学习八之滑动组件ListView和GridView的使用

时间:2020-9-4 作者:admin

今天我们用Flutter来实现这样的一个页面,类似于一个分组列表,在Android 中如果要实现一个这样的页面,实现想到的肯定是RecycleView,然后通过在adapter中设置两个item样式根据在数据中新增一个标示来区分是标题还是内容,一个控件就能搞定,但是在Flutter中并没有适配器的概念,那如果要实现这样的一个布局该怎么办?

Flutter学习八之滑动组件ListView和GridView的使用

通过分析页面得知,这应该是一个ListView嵌套一个GridView来实现的,在Android中RecycleView还没出来之前,我们如果要实现这样的一个布局,常用的方法其实也是一个ListView嵌套GridView来实现。

Flutter中ListView实际应用

@override
  Widget buildBody() {
    return ListView.builder(
        itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
        itemCount: navigationList.length);
  }

代码很简单,在页面的body中定义一个ListView.builder方法就可以构建一个listView,通过查看官方文档可以知道,构建一个listView有3种方式,分别是:

1.ListView

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

通过ListView构建的列表组件,需要传入一个 children参数来往列表种添加子空间,这种方式适合只有少量的子组件的情况,因为这种方式需要将所有 children都提前创建好(这需要做大量工作),而不是等到子 widget真正显示的时候再创建,这种方式是不支持Sliver的懒加载模型,如果控件太多,会存在性能问题。shrinkWrap为true表示填满子组件。

2.ListView.builder

ListView.builder(
        ... 部分参数这里没用到就没有列出来
        itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
        itemCount: navigationList.length)

通过ListView.builder构造的列表组件,构建方式支持动态构建,itemBuilder是用来构建列表的item,可以只定义你想要实现的item样式,这里 ItemNavigation内部包含一个 Text组件和一个 GridView组件,GridView实际的用法和ListView用法还是挺像的,和 Android中的GridView控件类似用来表示宫格的样式。

3.ListView.separated

ListView.separated(
      ... 部分参数这里没用到就没有列出来
        itemBuilder: (context, index) => ItemNavigation(navigationList[index]),
        itemCount: navigationList.length)
        //分割器构造器
        separatorBuilder: (BuildContext context, int index) {
          return index%2==0?divider1:divider2;
        },
    );

通过ListView.separated构造的组件,和 ListView.builder的用法区别不大,就多来一个分割构造器 separatorBuilder有时候页面每个item之间需要一个分割的控件,这时候就可以使用 ListView.separated来创建一个分割构造器,直接返回一个控件就可以了。

综上所述,当我们列表控件比较少,并且列表item样式比较多的时候,我们可以直接采用ListView来构建列表,如果列表数量比较大,而且是需要根据数据来动态控制的话,最好是采用ListView.builder来构建列表,最后如果列表如果需要分割线,或者其他的分割控件,推荐使用ListView.separated组件来实现列表。

为了能动态控制列表item数据更新,定义一个ItemNavigation类继承自 StatefulWidget来实现一个item样式,item的最外层采用一个Card包裹,通过源码可知该组件有如下属性:

const Card({
    Key key,
    this.color,//背景颜色
    this.shadowColor, //卡片阴影颜色
    this.elevation,//卡片阴影大小
    this.shape, //形状
    this.borderOnForeground = true,//前景色
    this.margin,//内部控件间距
    this.clipBehavior,//裁剪方式
    this.child, //子控件
    this.semanticContainer = true,
  })

这个控件和Android中的Card基本是一样,连名称都一样,主要作用是用来构造一个带阴影的卡片布局,属性也不算多,这里我们在child中添加一个竖像布局Column这个组件内部的控件都是竖像排列的,在 children属性中添加一个分类标题Text和分类内容GridView,这里的GridView也有两种方式构建,

Flutter中GridView实际应用

1.GridView

GridView({
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController controller,
  bool primary,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  @required SliverGridDelegate gridDelegate, //控制子widget layout的委托
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})

GridViewListView的大多数参数都是相同的,我们唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列。

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

SliverGridDelegateWithFixedCrossAxisCount

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

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

SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法,其构造函数为:

SliverGridDelegateWithMaxCrossAxisExtent({
  double maxCrossAxisExtent,//为子元素在横轴上的最大长度
  double mainAxisSpacing = 0.0,//主轴方向的间距。
  double crossAxisSpacing = 0.0,//横轴方向子元素的间距。
  double childAspectRatio = 1.0,//子元素在横轴长度和主轴长度的比例。由于crossAxisCount指定后,子元素横轴长度就确定了,然后通过此参数值就可以确定子元素在主轴的长度。
})

2.GridView.builder

当子widget比较多时,我们可以通过GridView.builder来动态创建子widget。GridView.builder 必须指定的参数有两个:

GridView.builder(
 ...
 @required SliverGridDelegate gridDelegate, 
 @required IndexedWidgetBuilder itemBuilder,
)

其中itemBuilder为子widget构建器。具体用法如下:

GridView.builder(
                //将所有子控件在父控件中填满
                shrinkWrap: true,
                padding: EdgeInsets.only(
                    left: 10.0, right: 10.0, top: 10.0, bottom: 10.0),
                //解决ListView嵌套GridView滑动冲突问题
                physics: NeverScrollableScrollPhysics(),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3, //每行几列
                    childAspectRatio: 3),
                itemCount: widget.navigationData.articles.length,
                itemBuilder: (context, index) {
                 //要返回的item样式
                    },
                  );
                })

这里要注意一点的是,因为我们这里的GridView是嵌套在ListView中的,GridViewListView都是支持滑动的,所以为来避免滑动冲突我们需要禁用子控件的滑动事件,在GridView中添加 physics:NeverScrollableScrollPhysics(),就可以禁用其滑动事件,physics属性对所有支持滑动的控件都支持,也包含ListView

Flutter中滑动组件总结

Flutter中不论是GridView还是ListView都是有很多的相同之处,都有不同的构造函数,都支持Sliver的延迟构建,,Flutter中提出一个Sliver概念,如果一个可滚动组件支持Sliver模型,那么该滚动可以将子组件分成好多个Sliver,只有当Sliver出现在视口中时才会去构建它,这种模型也称为“基于Sliver的延迟构建模型”。简单来说就类似于Android上面的,RecycleView复用机制,只构建当前窗口的数据模型,这样做的好处就是可以提升列表的性能。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。