Flutter Sliver大家族之SliverList(),SliverFixedExtentList(),SliverGrid()组件②

人之所以悲哀，是因为我们留不住岁月，更无法不承认，青春，有一日是要这么自然的消失过去。而人之可贵，也在于我们因着时光环境的改变，在生活上得到长进。岁月的流失固然是无可奈何，而人的逐渐蜕变，却又脱不出时光的力量。

上一章Flutter 小知识:CustomScrollView和SliverAppBar 组件介绍了CustomScrollView和SliverAppBar本章介SliverList(),SliverFixedExtentList(),SliverGrid组件

今日完成效果:

效果图(1.1):

SliverFixedExtentList()

加粗是必传参数

SliverFixedExtentList参数	类型	说明
itemExtent	double	设置子Widget之间的高度
delegate	SliverChildBuilderDelegate	设置子Widget的布局内容

代码:

 ///SliverFixedExtentList
  Widget initSliverFixedExtentList() {
    return SliverFixedExtentList(
      //设置子条目高度
      itemExtent: 70.0,
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Text('SliverFixedExtentList $index ');
      }, childCount: 10),
    );
  }

加粗是必传参数

SliverChildBuilderDelegate参数	类型	说明
builder	Function(context,index)	用于显示当前Widget布局,index当前布局下标
childCount	int	子Widget个数

效果图(1,2):

SliverList()

加粗是必传参数

SliverList参数	类型	说明
delegate	SliverChildBuilderDelegate	设置子Widget的布局内容

代码:

///SliverList
  Widget initSliverList() {
    return SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        return Text(
          "SliverList:$index",
          textAlign: TextAlign.center,
        );
      }, childCount: 10),
    );
  }

效果图(1.3):

SliverList()和SliverFixedExtentList()的区别:

• SliverList()高度根据子Widget来设置
• SliverFixedExtentList()高度根据itemExtent参数来设置

SliverGrid()

加粗是必传参数

SliverGrid参数	类型	说明
delegate	SliverChildBuilderDelegate	设置子Widget的布局内容
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount	用来控制Grid子条目行列高度等

SliverGridDelegateWithFixedCrossAxisCount参数	类型	说明
crossAxisCount	int	几列
mainAxisSpacing	double	上下间隔
crossAxisSpacing	double	左右间隔

SliverGrid代码:

 Widget initSliverGrid() {
    return SliverGrid(
      //子Widget布局
      delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
        return Text("SliverGrid:$index");
      }, childCount: 20),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4, //四列
        mainAxisSpacing: 8, //item上下间隔
        crossAxisSpacing: 8, //item左右间隔
      ),
    );
  }

效果图(1.4):

完整项目

完整代码

猜你喜欢:

Flutter Slider,CupertinoSlider滑动条

Flutter Sliver大家族之CustomScrollView和SliverAppBar 组件①

Flutter Sliver大家族之SliverPersistentHeader()和SliverToBoxAdapter()组件③

Flutter Sliver大家庭之Sliver实战④

原创不易,您的点赞就是对我最大的支持,点个赞支持一下吧~