颤抖的工具具有粘性标题和对齐项效果 [英] flutter implement sticky headers and the snap to item effect

问题描述

在过去的几天里，我一直在阅读Flutter框架文档，尤其是Sliver部分，但我不确定从哪里开始. 我正在尝试实现粘性标头和对齐效果. RenderSliv​​erList可能是一个好的开始吗?我需要重新布局吗?我需要做其他绘图吗?如果可以的话，在哪里?

For the last few days, I've been reading through flutter framework documentation and especially the sliver part but I'm not quite sure where to start. I'm trying to implement the sticky headers and snap effect. Might the RenderSliverList be a good start? Do I need to re-layout things? Do I need to do additional drawing? And if so where?

任何有关从何处开始的帮助都是巨大的帮助，在此先感谢您！

Any help on where to start would be a huge help, thanks in advance!

我想我现在已经了解了布局部分，但是我只是找不到应该在哪里进行绘画.

I think I understood the layout part now, but I just can't find where the painting is supposed to happen.

为澄清起见，这是所需的粘性标题效果":

Edit 2: For clarification, this is the desired "sticky header effect":

如何在RecyclerView? (没有外部库)

这是快照"效果:

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

推荐答案

对于粘性标头效应"，我自己遇到了这个问题，因此我创建了此程序包来管理带有条子的粘性标头:

For the "sticky header effect" I ran into this problem myself, so I created this package to manage sticky headers with slivers: https://github.com/letsar/flutter_sticky_header

要使用它，必须在CustomScrollView中的每个部分创建一个SliverStickyHeader.

To use it you have to create one SliverStickyHeader per section in a 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,
    ),
  ),
);

如果需要，上述演示的整个源代码在这里:

If you want, the entire source code for the above demo is here: https://github.com/letsar/flutter_sticky_header/blob/master/example/lib/main.dart

我希望这会对您有所帮助.

I hope this will help you.

这篇关于颤抖的工具具有粘性标题和对齐项效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！