媒体网站建设chrome网页版入口
文章目录
- 概念介绍
- 使用方法
- 示例代码
我们在上一章回中介绍了SliverAppBar组件相关的内容，本章回中将介绍 SliverPadding组件.闲话休提，让我们一起Talk Flutter吧。
概念介绍
我们在本章回中介绍的SliverPadding组件类似Pading组件，它主要用来给其它组件添加边距。只不过SliverPadding是专门给SliverList和SliverGrid组件添加边距的，而Padding组件可以给Sliiver相关组件外的所有组件添加边距，因此SliverPadding是专用的，而Padding是通用的，使用范围相对广一些。本章回中将详细介绍SliverPadding组件的使用方法。
使用方法
和其它组件一样SliverPadding组件提供了相关的属性来控制自己，我们只需要掌握常用的属性就可以，下面是该组件中常用的属性：
- sliver属性：主要用来存放其它组件，不过必须是SliverList或者SliverGrid类型的组件；
- padding属性：主要用来控制组件在周围四个方向上的边距，这个组件就是sliver属性对应组件；
掌握这些常用属性后，我们来在后面的小节中通过具体的示例代码来演示它的使用方法。
示例代码
SliverPadding(///在上下左右四个方向上添加边距padding: const EdgeInsets.all(10),sliver:SliverList(delegate:SliverChildListDelegate(List.generate(5,(index) => Container(color: Colors.grey,child: Text('Item ${index+1}'),),),) ,) ,
),
SliverPadding(padding: const EdgeInsets.all(10),sliver: SliverGrid.count(mainAxisSpacing: 10,crossAxisCount: 4,crossAxisSpacing: 10,children: List.generate(9, (index) => Container(alignment: Alignment.center,color: Colors.primaries[index%5],child: Text('Item ${index+1}'),),) ,),
),
上面的示例代码中分别使用SliverPadding组件给SliverList和SliverGrid组件添加了边距,不过SliverGrid组件的效果更加显一些，因为它可以调整内部各个网格的边距，内部和边距和四周的边距配合在一起的效果更加明显一些。而SliverList则只有四周有边距。
不过依据目前的知识我们还不能演示程序的运行结果，因为还需要其它组件配合才可以运行，大家不用担心，目前只需要熟练掌握如何创建SliverPadding组件就可以了，我们在后面章回中会使用本章回创建的组件给大家演示程序运行效果。
看官们，与"SliverPadding组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!