第一百六十回 SliverPadding组件


我们在上一章回中介绍了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组件给SliverListSliverGrid组件添加了边距,不过SliverGrid组件的效果更加显一些,因为它可以调整内部各个网格的边距,内部和边距和四周的边距配合在一起的效果更加明显一些。而SliverList则只有四周有边距。

不过依据目前的知识我们还不能演示程序的运行结果,因为还需要其它组件配合才可以运行,大家不用担心,目前只需要熟练掌握如何创建SliverPadding组件就可以了,我们在后面章回中会使用本章回创建的组件给大家演示程序运行效果。

看官们,与"SliverPadding组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
这个错误提示表明 `SliverList` 期望接收一个 `RenderBox` 类型的子项,但实际上它接收到的是一个 `RenderSliverList` 类型的子项。 这个问题通常是由于将 `SliverList` 放在了 `Column` 控件中导致的。`CustomScrollView` 的 `slivers` 属性期望接收一个 `List<Widget>` 类型的列表,而不是一个带有 `Column` 的控件。 要解决这个问题,你可以将 `CustomScrollView` 包装在一个 `Column` 中,然后将 `CustomScrollView` 的直接子项改为 `slivers` 属性中的 `Sliver` 控件。 以下是修改后的代码示例: ```dart Column( children: <Widget>[ Expanded( child: CustomScrollView( slivers: <Widget>[ SliverAppBar( title: Text('CustomScrollView Demo'), floating: true, flexibleSpace: Placeholder(), expandedHeight: 200, ), SliverList( delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ListTile( title: Text('Item $index'), ); }, childCount: 20, ), ), SliverGrid( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10, childAspectRatio: 1.5, ), delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return Container( color: Colors.blue[index % 9 * 100], child: Center( child: Text('Grid Item $index'), ), ); }, childCount: 10, ), ), ], ), ), ], ) ``` 在修改后的代码中,我们将 `CustomScrollView` 包装在一个 `Expanded` 中,以便它可以占据 `Column` 中的剩余空间。这样就能够正确地将 `CustomScrollView` 的 `slivers` 属性中的 `Sliver` 控件作为直接子项。 希望这个解决方案对你有帮助。如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值