web-dev-qa-db-ja.com

フラッターはスティッキーヘッダーとアイテムへのスナップ効果を実装します

ここ数日間、私はフラッターフレームワークのドキュメント、特にスライバーの部分を読んでいますが、どこから始めればよいのかよくわかりません。スティッキーヘッダーとスナップ効果を実装しようとしています。 RenderSliv​​erListは良いスタートになるでしょうか？レイアウトを変更する必要がありますか？追加の描画を行う必要がありますか？もしそうならどこで？

どこから始めればよいかという助けは大きな助けになります。よろしくお願いします！

編集：レイアウトパーツは今は理解できたと思いますが、ペイントが行われる場所を見つけることができません。

編集2：明確にするために、これは望ましい「スティッキーヘッダー効果」です：

RecyclerViewでスティッキーヘッダーを作成するにはどうすればよいですか（外部ライブラリなし）

これが「スナップ」効果です。

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

dartflutterflutter-sliver
11
Norbert

「スティッキーヘッダー効果」については、自分でこの問題にぶつかったので、スライバーでスティッキーヘッダーを管理するためにこのパッケージを作成しました。 https://github.com/letsar/flutter_sticky_header

Flutter Sticky Headers

使用するには、SliverStickyHeaderのセクションごとに1つのCustomScrollViewを作成する必要があります。

1つのセクションは次のように記述できます。

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

これがお役に立てば幸いです。

17
Romain Rastel

それは非常に簡単です：

CustomScrollView を使用し、子として SliverList と 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 をscrollViewの子として追加するだけで、グリッドの後にリストが続く可能性があります。

フラッターは素晴らしいです。

6
Rémi Rousselet

次のコードを使用して、iOSアプリのFlutterでstickyheader効果を実行することができました-私がインスピレーションを引き出した場所からここに書かれたこのコードにクレジットが行きます（ 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でコンテンツをラップする方法はわかりませんが、動作させるには36論理ピクセルのサイズを指定する必要がありました。コンテンツをラップする方法をご存知の方は、以下の回答にコメントをお寄せください。

enter image description here

3
Simon