颤振实现粘性标题和捕捉项目效果

Question

在过去的几天里,我一直在阅读颤动的框架文档,特别是条子部分,但我不太清楚从哪里开始.我正在尝试实现粘性标题和捕捉效果.RenderSliv​​erList可能是一个好的开始吗？我需要重新布局吗？我需要做额外的绘图吗？如果是这样的话？

任何帮助,从哪里开始将是一个巨大的帮助,提前感谢!

编辑:我想我现在理解了布局部分,但我无法找到绘画应该发生的地方.

编辑2:为了澄清,这是所需的"粘性标题效果":

如何在RecyclerView中制作粘性标题？(没有外部库)

这是"快照"效果:

https://rubensousa.github.io/2016/08/recyclerviewsnap

Answer 1

对于"粘性标题效果"我自己遇到了这个问题,所以我创建了这个包来管理带有条子的粘性标题:https://github.com/letsar/flutter_sticky_header

要使用它,你必须在SliverStickyHeader每个部分创建一个CustomScrollView.

一节可以这样写:

new SliverStickyHeader(
  header: new Container(
    height: 60.0,
    color: Colors.lightBlue,
    padding: EdgeInsets.symmetric(horizontal: 16.0),
    alignment: Alignment.centerLeft,
    child: new Text(
      'Header #0',
      style: const TextStyle(color: Colors.white),
    ),
  ),
  sliver: new SliverList(
    delegate: new SliverChildBuilderDelegate(
      (context, i) => new ListTile(
            leading: new CircleAvatar(
              child: new Text('0'),
            ),
            title: new Text('List tile #$i'),
          ),
      childCount: 4,
    ),
  ),
);

如果需要,上面演示的完整源代码如下:https://github.com/letsar/flutter_sticky_header/blob/master/example/lib/main.dart

我希望这能帮到您.

Answer 2

我设法使用以下代码在 Flutter 上为 iOS 应用程序制作了stickyheader 效果 - 归功于此处编写的这段代码，我从中汲取灵感（https://github.com/flutter/flutter/blob/master/示例/flutter_gallery/lib/demo/animation/home.dart#L112）：

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate({
    @required this.collapsedHeight,
    @required this.expandedHeight,}
      );

  final double expandedHeight;
  final double collapsedHeight;

  @override double get minExtent => collapsedHeight;
  @override double get maxExtent => math.max(expandedHeight, minExtent);

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(color: Colors.red,
        child: new Padding(
          padding: const EdgeInsets.only(
              left: 8.0, top: 8.0, bottom: 8.0, right: 8.0),
          child: new Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new Text("Time"), new Text("Price"), new Text("Hotness")
            ],
          ),
        )
    );
  }

  @override
  bool shouldRebuild(@checked _SliverAppBarDelegate oldDelegate) {
    return expandedHeight != oldDelegate.expandedHeight
        || collapsedHeight != oldDelegate.collapsedHeight;
  }
}

要使其具有粘性，请将 _SliverAppBarDelegate 添加到 silvers 小部件列表中：

 new SliverPersistentHeader(delegate: new _SliverAppBarDelegate(collapsedHeight: 36.0, expandedHeight: 36.0), pinned: true, ),

我不太确定如何让 _SliverAppBarDelegate 包装内容，我必须为其提供 36 个逻辑像素的大小才能使其工作。如果有人知道它是如何包装内容的，请对下面的答案发表评论。

Answer 3

很简单：

使用a CustomScrollView并将其作为a SliverList和a的子项SliverAppBar。您可以替换SliverList使用SliverGrid，如果你需要。

然后，根据要实现的效果，可以在其中设置一些属性SliverAppBar：

• 卡
• ExpandedHeight（+ flexibleSpace）
• 漂浮的
• 固定

最后，您可能会遇到类似于：

new CustomScrollView(
    slivers: <Widget>[
        new SliverAppBar(
            title: new Text("Title"),
            snap: true,
            floating: true,
        ),
        new SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                    return new Container(
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: new Text('list item $index'),
                    );
                },
            ),
        ),
    ],
)

更好的是，您可以在单个内串联不同的滚动行为CustomScrollView。这意味着您只需SliverGrid在滚动视图中添加一个子元素，就可以拥有一个网格后跟一个列表。

我知道我知道，颤抖很棒。