sliver_tools
一组 Flutter 框架中缺失的有用 sliver 工具。
这是使用此软件包可以制作内容的预览
此应用程序的结构
class Section extends State {
@override
Widget build(BuildContext context) {
return MultiSliver(
pushPinnedChildren: true,
children: <Widget>[
SliverPersistentHeader(
pinned: true,
...
),
if (!infinite)
SliverAnimatedPaintExtent(
child: SliverList(...),
)
else
SliverList(...),
],
);
}
}
class NewsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
Section(infinite: false),
Section(infinite: true),
],
);
}
}
[MultiSliver]
MultiSliver 小部件允许将多个 slivers 分组，以便它们可以作为单个小部件返回。
例如，当人们想用一些填充或继承的小部件来包装几个 slivers 时。
示例
class WidgetThatReturnsASliver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiSliver(
pushPinnedChildren: false, // defaults to false
children: <Widget>[
SliverPersistentHeader(...),
SliverList(...),
],
);
}
}
pushPinnedChildren 参数允许通过简单地使用固定的 SliverPersistentHeader 小部件（或任何在其布局范围内绘制的自定义 sliver）来实现“固定页眉”效果。
SliverStack
SliverStack 小部件允许堆叠 slivers 和 box 小部件。
这对于为 sliver 添加一些装饰很有用。
此包中的其他一些小部件使用此来获得所需的视觉效果。
示例
class WidgetThatReturnsASliver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverStack(
insetOnOverlap: false, // defaults to false
children: <Widget>[
SliverPositioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: const <BoxShadow>[
BoxShadow(
offset: Offset(0, 4),
blurRadius: 8,
color: Colors.black26,
)
],
borderRadius: BorderRadius.circular(8),
),
),
)
SliverList(...),
],
);
}
}
insetOnOverlap 处理当 sliver 具有来自前一个 sliver 的重叠时，定位的子项是否应内嵌（缩小）。
[SliverClip]
SliverClip 小部件将在其子项的 paintOrigin 到 paintExtent 之间添加剪辑。
当将固定的 SliverPersistentHeader 用作堆栈的子项时，这非常有用，并且很可能是您想要的。
示例
class WidgetThatReturnsASliver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverClip(
clipOverlap: true, // defaults to true
child: SliverList(...),
);
}
}
clipOverlap 参数允许配置是否应剪辑与前一个子项的任何重叠。
当一个 SliverPersitentHeader 位于 SliverList 之上，并且您不想给页眉一个不透明的背景，但又想阻止列表在页眉下方绘制时，这会很有用。
[SliverAnimatedPaintExtent]
SliverAnimatedPaintExtent 小部件允许在 sliver 更改其在视口中占据的空间时实现平滑过渡。
例如，当使用 SliverList 并在其下方有一个按钮来加载接下来的几项时。
示例
class WidgetThatReturnsASliver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverAnimatedPaintExtent(
duration: const Duration(milliseconds: 150),
child: SliverList(...),
);
}
}
[SliverAnimatedSwitcher]
SliverAnimatedSwitcher 小部件只是一个预配置的 AnimatedSwitcher 小部件。
如果一个人需要的选项比此小部件提供的更多，则可以通过为其提供 SliverAnimatedSwitcher 的 defaultLayoutBuilder 和 defaultTransitionBuilder 来使用常规的 AnimatedSwitcher。
[SliverCrossAxisConstrained]
SliverCrossAxisConstrained 小部件允许将 sliver 的交叉轴范围限制为 maxCrossAxisExtent 提供的最大值。
例如，在 iPad 上，大量的文本项可能会太宽而难以阅读，因此人们可以将 SliverList 包装在 SliverCrossAxisConstrained 中，并将其宽度限制为更合理的值。
示例
class WidgetThatReturnsASliver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverCrossAxisConstrained(
maxCrossAxisExtent: 700,
child: SliverList(...),
);
}
}
[SliverCrossAxisPadded]
SliverCrossAxisPadded 小部件允许为 sliver 的交叉轴添加填充。
这可以通过传递 paddingStart 和/或 paddingEnd 来完成，或者使用采用单个填充值的 symmetric 构造函数。
在垂直 sliver 中使用 paddingStart 和 paddingEnd 时，它将取决于 TextDirection 哪个是左侧或右侧。
示例
class WidgetThatReturnsASliver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliverCrossAxisPadded(
paddingStart: 24,
paddingEnd: 48,
textDirection: TextDirection.ltr, // optional, defaults to the Directionality specified by the context
child: SliverList(...),
);
}
}
[SliverPinnedHeader]
SliverPinnedHeader 小部件允许轻松创建固定的页眉。
它的大小将与其子项的大小相匹配，当它到达视口的前沿时，它会停在那里，而不是滚动出屏幕。
