- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
在上一篇文章我们讲解SliverAppBar的时候有提到过,Sliver的组件一般都用在CustomScrollView中。除了SliverAppBar之外,我们还可以为CustomScrollView添加List或者Grid来实现更加复杂的组合效果.
今天要向大家介绍的就是SliverList和SliverGird.
从名字就可以看出SliverList和SliverGird分别是List和Grid的一种,他们和List与Grid最大的区别在于,他们可以控制子widget在main axis和cross axis之间的间隔,并且可以通过Extent属性来控制子widget的大小,非常的强大.
我们先来看下这两个组件的定义和构造函数:
class SliverList extends SliverMultiBoxAdaptorWidget {
/// Creates a sliver that places box children in a linear array.
const SliverList({
Key? key,
required SliverChildDelegate delegate,
}) : super(key: key, delegate: delegate);
SliverList继承自SliverMultiBoxAdaptorWidget,它的构造函数比较简单,需要传入一个SliverChildDelegate的参数,这里的SliverChildDelegate使用的是delegate的方法来创建SliverList的子组件.
SliverChildDelegate是一个抽象类,它有两个实现类,分别是SliverChildBuilderDelegate和SliverChildListDelegate.
其中SliverChildBuilderDelegate是用的builder模式来生成子widget,在上一篇文章中,我们构建SliverList就是使用的这个builder类.
SliverChildBuilderDelegate使用builder来生成子Widget,而SliverChildListDelegate需要传入一个childList来完成构造,也就是说SliverChildListDelegate需要一个确切的childList,而不是用builder来构建.
要注意的是SliverList并不能指定子widget的extent大小,如果你想指定List中的子widget的extent大小的话,那么可以使用SliverFixedExtentList
class SliverFixedExtentList extends SliverMultiBoxAdaptorWidget {
const SliverFixedExtentList({
Key? key,
required SliverChildDelegate delegate,
required this.itemExtent,
}) : super(key: key, delegate: delegate);
可以看到SliverFixedExtentList和SliverList相比,多了一个itemExtent参数,用来控制子widget在main axis上的大小.
然后我们再来看一下SliverGird:
class SliverGrid extends SliverMultiBoxAdaptorWidget {
/// Creates a sliver that places multiple box children in a two dimensional
/// arrangement.
const SliverGrid({
Key? key,
required SliverChildDelegate delegate,
required this.gridDelegate,
}) : super(key: key, delegate: delegate);
SliverGrid也是继承自SliverMultiBoxAdaptorWidget,和SliverList一样,它也有一个SliverChildDelegate的参数,另外它还多了一个gridDelegate的参数用来控制gird的布局.
这里的gridDelegate是一个SliverGridDelegate类型的参数,用来控制children的size和position.
SliverGridDelegate也是一个抽象类,它有两个实现类,分别是SliverGridDelegateWithMaxCrossAxisExtent和SliverGridDelegateWithFixedCrossAxisCount,这两个实现类的区别就在于MaxCrossAxisExtent和FixedCrossAxisCount的区别.
怎么理解MaxCrossAxisExtent呢?比如说这个Grid是竖向的,然后Gird的宽度是500.0,如果MaxCrossAxisExtent=100,那么delegate将会创建5个column,每个column的宽度是100.
crossAxisCount则是直接指定cross axis的child个数有多少.
有了上面介绍的SliverList和SliverGird的构造函数,接下来我们具体来看下如何在项目中使用SliverList和SliverGird.
默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用的,所以我们先创建一个CustomScrollView,在它的slivers属性中,放入一个SliverAppBar组件:
CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
snap: false,
floating: false,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('SliverList and SliverGrid'),
),
),
],
);
SliverAppBar只是一个AppBar,运行可以得到下面的界面:
我们还需要为它继续添加其他的slivers组件.
首先给他添加一个SliverGrid:
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 20.0,
crossAxisSpacing: 50.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.green[100 * (index % 9)],
child: Text('grid item $index'),
);
},
childCount: 20,
),
),
这里我们设置了gridDelegate属性,并且自定义了SliverChildBuilderDelegate,用来生成20个Container.
运行得到的界面如下:
然后为其添加SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: index.isOdd ? Colors.white : Colors.green,
height: 50.0,
child: Center(
child: ListTile(
title: Text(
'100' + index.toString(),
style: const TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.account_box,
color: Colors.green[100 * (index % 9)],
),
),
),
);
},
childCount: 15,
),
),
因为SliverList只需要传入一个delegate参数,这里我们生成了15个child组件。生成的界面如下:
因为SliverList不能控制List中子widget的extent,所以我们再添加一个SliverFixedExtentList看看效果:
SliverFixedExtentList(
itemExtent: 100.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
color: index.isOdd ? Colors.white : Colors.green,
height: 50.0,
child: Center(
child: ListTile(
title: Text(
'200' + index.toString(),
style: const TextStyle(fontWeight: FontWeight.w500),
),
leading: Icon(
Icons.account_box,
color: Colors.green[100 * (index % 9)],
),
),
),
);
},
childCount: 15,
),
SliverFixedExtentList和SliverList相比多了一个itemExtent属性,这里我们将其设置为100,运行可以得到下面的界面:
可以看到List中的子Widget高度发生了变化.
在CustomScrollView中使用SliverList和SliverGird,可以实现灵活的呈现效果.
本文的例子: https://github.com/ddean2009/learn-flutter.git 。
最后此篇关于flutter系列之:使用SliverList和SliverGird的文章就讲到这里了,如果你想了解更多关于flutter系列之:使用SliverList和SliverGird的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我已经尝试了一段时间,但我无法让它工作。 我想在带有 CupertinoSliverNavigationBar 的 CustomScrollView 中创建一个 ListView 。 SliverLi
我目前有一个 SliverList 其项目是动态加载的。问题是,一旦加载了这些项目,SliverList 会更新,而不会对更改进行动画处理,从而使加载和加载之间的过渡非常不和谐。 我看到 Animat
我有一个 Sliver List,我想把它封装在一张卡片中。这是我的 Sliver List 代码: Widget hello() { return SliverPadding(
我在我的应用程序中使用 SliverAppBar 和 SliverList 作为主要容器。 当我尝试将 SliverList 包装在 Scrollbar 小部件中时,出现错误,当我将整个 Custom
我有一个 SliverList与 SliverChildBuilderDelegate , 我的问题是我无法设置 ScrollController至 SliverList因为我想控制我的列表的滚动,我
这是我的代码: class HomeCardList extends StatefulWidget { final Location location; final Position posi
我看过新的 Flutter 视频,还看到了一些有趣的东西。 (这不是典型的粘性标题或可扩展列表,所以我不知道如何命名) Video - 从 0:20 开始观看 有人知道如何使用 SliverList
我目前正在使用 SliverList 和 SliverChildBuilderDelegate 在 Flutter 中构建一个日历 View ,这样我就不必一次渲染日历中的每个项目。 第一个日期是纪元
我有一个 SliverList,我将它与 SliverAppBar 一起使用,以便在用户滚动列表时为应用栏设置动画(真的是 slivers 的标准用例,没什么特别的)。 现在我想为 SliverLis
Flutter中SliverList和SliverFixedExtentList有什么区别? 根据每个小部件的文档: SliverList :“一个条子,将多个子盒子放置在沿主轴的线性阵列中。” Sl
我正在使用 SliverAppBar和 SliverListView在我的项目中。 我需要BorderRadius到我的 SliverList这是我的 SliverAppBar 的底部. 这是我需要的
我们如何在 SliverList 中实现 Separator/Divider。 ListView.separated 是在列表中创建分隔符的便捷方法,但我没有看到任何关于 SliverList 的文档
我正在构建一个天气预报应用程序,其中 SliverAppBar 显示当前天气,SliverList 以卡片形式显示每日预报。我以 map 的形式从 DarkSky API 获取数据。 我已经使用 Fu
我正在构建一个天气预报应用程序,其中 SliverAppBar 显示当前天气,SliverList 以卡片形式显示每日预报。我以 map 的形式从 DarkSky API 获取数据。 我已经使用 Fu
我想隐蔽ListView至 CustomScrollView所以我需要转换我的 FutureBuilder进入SliverList . 这是我的代码: class LatestNewsList ext
我试图在 SliverAppBar 上重叠几个像素的 SliverList。类似于 this post .我希望 FlexibleSpaceBar 中的图像位于 SliverList 的半径范围内。我
如何获取 Flutter ListView、GridView、SliverList` 等中的当前滚动偏移量? 最佳答案 如果您在 ScrollView 中,请使用 Scrollable.of(cont
我正在尝试在 TabBarView 中使用 SliverList 但我不断收到这些错误: 断言失败:第 5966 行第 12 行:“child == _child”:不正确。 RenderRepain
我在 CustomScrollView 中使用 SliverPersistentHeader 和 SliverList。在到达 SliverList 的第一项(索引:0)之前,我不希望我的 Slive
我正在尝试添加一个 sliverlist 但它对我不起作用,我对使用 flutter 很陌生,我很困惑。 @override Widget build(BuildContext context) {
我是一名优秀的程序员,十分优秀!