dart flutter实现粘滞标题和对齐项目效果

pb3skfrl  于 2023-02-17  发布在  Flutter
关注(0)|答案(6)|浏览(167)

在过去的几天里,我一直在阅读flutter框架的文档,尤其是片段部分,但我不太确定从哪里开始。我正在尝试实现粘头和捕捉效果。RenderSliverList可能是一个好的开始吗?我需要重新布局吗?我需要做额外的绘图吗?如果需要,从哪里开始?
任何帮助从哪里开始将是一个巨大的帮助,提前感谢!
编辑:我想我现在明白了布局的部分,但我就是找不到画应该发生在哪里。
编辑2:为了澄清,这是期望的“粘性标题效果”:
How can I make sticky headers in RecyclerView? (Without external lib)
这就是“瞬间”效应
https://rubensousa.github.io/2016/08/recyclerviewsnap

ncgqoxb0

ncgqoxb01#

对于“粘头效应”,我自己也遇到了这个问题,所以我创建了这个包来管理带有切片的粘头:https://github.com/letsar/flutter_sticky_header

要使用它,您必须在CustomScrollView中的每个部分创建一个SliverStickyHeader
其中一节可以这样写:

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
希望这对你有帮助。

x759pob2

x759pob22#

很简单:
使用CustomScrollView,并给予SliverListSliverAppBar作为子项。如果需要,可以将SliverList替换为SliverGrid
然后,根据您想要实现的效果,您可以在SliverAppBar上设置一些属性:

  • 弹响
  • 扩展高度(+灵活空间)
  • 浮动
  • 钉扎

最后,你可能会有类似的东西:

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作为子对象添加到scrollView中,就可以在一个网格后面跟随一个列表。
我知道我知道,扑翼很棒。

enxuqcxy

enxuqcxy3#

我使用下面的代码成功地在一个iOS应用程序的Flutter上实现了粘头效果--这段代码是我在这里获得灵感的来源(https://github.com/flutter/flutter/blob/master/examples/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 Package 内容,我必须提供36个逻辑像素的大小才能让它工作。如果有人知道它如何 Package 内容,请在下面的答案中留下评论。

6ljaweal

6ljaweal4#

我解决了这个问题,请尝试sticky_and_expandable_list

特征

  • 支持构建可展开的ListView,可以展开/折叠节或创建粘性节标题。
  • 将其与自定义滚动视图、SliverAppBar一起使用。
  • 侦听当前粘头的滚动偏移量、当前粘头索引和切换头索引。
  • 只使用一个列表widget,支持大数据量和小内存占用;更多版块定制支持,可以通过sectionBuilder返回一个新的版块widget,定制背景、展开/折叠动画、版块布局等。
  • 支持添加分频器。
oxalkeyp

oxalkeyp5#

根据文档,您可以将StickyHeaderStickyHeaderBuilder放置在任何可滚动内容中。
文档page只提供了一个示例,如何将StickyHeaderListView一起应用,那么其他小部件(如SingleChildScrollViewCustomScrollView)呢?
在这个例子中,我将提供一个非常简单的StickyHeader和一个SingleChildScrollView,并确保您可以将其放入任何您想要的SingleChildScrollView中:

return Container(
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("My title"),
          StickyHeader(
            header: Container(
                  child: // Put here whatever widget you like as the sticky widget
                ),
            content: Column(
              children: [
                Container(
                  child: // Put here whatever widget you like as scrolling content (Column, Text, ListView, etc...)
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
nszi6y05

nszi6y056#

不使用slib实现你的插件,你可以使用flutter社区awesome插件来实现。
https://pub.dev/packages/sticky_headers

相关问题