Flutter-SliverGrid

SliverGrid将item以一行俩个或多个的形式排列;
Flutter中Sliver开头的控件需要配合CustomscrollView来实现;

继承关系:

Object > Diagnosticable > DiagnosticableTree > Widget >  RenderObjectWidget >  SliverWithKeepAliveWidget >  SliverMultiBoxAdaptorWidget >  SliverGrid

构造方法:
1、

SliverGrid({Key key, @required SliverChildDelegate delegate, @required SliverGridDelegate gridDelegate })

创建一个slive,放入二维布局中,需要指定一个gridDelegate,它提供了一个自定义Delegate入口,可以自定义iten怎么排列;

示例代码:

 ///SliverGrid构造方法
  Widget _getSliverGridWidget(BuildContext context) {
    return SliverGrid(
        delegate:
            SliverChildBuilderDelegate((BuildContext context, int position) {
          return getChildWidget(_getData()[position]);
        }),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount:3,
          mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0
        ),

    );
  }

2、

SliverGrid.count({Key key, @required int crossAxisCount, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, List<Widget> children: const [] })

指定一行展示多少个item;

示例代码:

 ///count构造方法
  Widget _getSliverGirdCountWidget(BuildContext context) {
    return SliverGrid.count(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        children: _getData().map((item) => getChildWidget(item)).toList());
  }

3、

SliverGrid.extent({Key key, @required double maxCrossAxisExtent, double mainAxisSpacing: 0.0, double crossAxisSpacing: 0.0, double childAspectRatio: 1.0, List<Widget> children: const [] })

可以指定item的最大宽度,然后让flutter自己决定一行展示多少item;

示例代码:

///Extent构造方法
  Widget _getSliverGirdExtentWidget(BuildContext context) {
    return SliverGrid.extent(
        maxCrossAxisExtent: 100.0,
        crossAxisSpacing: 10.0,
        mainAxisSpacing: 10.0,
        children: _getData().map((item) => getChildWidget(item)).toList());
  }

SliverAppBar:实现AppBar展开/收起功能,给SliverAppBar设置flexibleSpace和expandedHeight属性;

示例代码:

 Widget _getHeaderWidget(BuildContext context){
    return SliverAppBar(
      actions: <Widget>[
//       Container(color: Colors.black,width: 50.0,height: 50.0,),
      ],
      floating: true,
      centerTitle: true,
      title: Text('SliverAppBar'),
      backgroundColor: Colors.red,
      expandedHeight: 120.0,
      flexibleSpace: FlexibleSpaceBar(
        background: Image.asset('assets/img_no_data.png',fit: BoxFit.contain,),
      ),
    );


  }