フルート上級章～スリヴァー

1. リスト作成の効果は ListView の効果と同じです。ListView は基本的にその背後に SliverList を作成します。ListView.build の場合、実際には SliverChildBuilderDelegate を使用します。Sliver を使用するには、最初にウィンドウ CustomScrollView を定義する必要があります。 Sliver が提供するコンポーネントでレイヤーをラップしたい場合は、Sliver コンポーネントのみを書き込み、Container を直接書き込みます。するとエラーが報告されます。

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: FlutterLogo(
                size: 100,
              ),
            ),
            SliverGrid(
                delegate: SliverChildBuilderDelegate(((context, index) {
                  return Container(
                    height: 44,
                    color: Colors.primaries[index % 18],
                  );
                }), childCount: 8),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4)),
            SliverList(
              delegate: SliverChildBuilderDelegate(((context, index) {
                return Container(
                  height: 100,
                  color: Colors.primaries[index % 18],
                );
              })),
            )
          ],
        ));
  }

2. 各種シルバーリスト 

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: DefaultTextStyle(
            style: TextStyle(fontSize: 100, color: Colors.black),
            child: CustomScrollView(
              slivers: [
                //1.元素高度可以自适应（高度可以根据实际情况变化，例如：当系统字号调大时）
                SliverPrototypeExtentList(
                    delegate: SliverChildListDelegate(
                        [Text('hello'), Text('hello'), Text('hello')]),
                    prototypeItem: Text('')),
                //2.给元素设置固定高度
                SliverFixedExtentList(
                    delegate: SliverChildListDelegate([
                      FlutterLogo(
                        size: 100,
                      )
                    ]),
                    itemExtent: 50),
                //3.有点类似属于PageView组件，会把每个元素填满整个视窗
                SliverFillViewport(
                    delegate: SliverChildListDelegate(
                        [Text('hello'), Text('hello'), Text('hello')])),
              ],
            )));
  }

3、SliverAppBar 

頭上にあるナビゲーション バー AppBar を引き下げると、スクロールをたどることができます。

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: [
        SliverAppBar(title: Text("SliverAppBar")),
        SliverToBoxAdapter(child: Placeholder()),
        SliverList(
            delegate: SliverChildListDelegate([
          FlutterLogo(),
          FlutterLogo(size: 40),
          FlutterLogo(),
        ]))
      ],
    ));
  }

ナビゲーション バーを引き下げると、非常に引き伸ばされた効果が得られます 

 

 SliverAppBar(
            title: Text("SliverAppBar"),
            floating: true,
            snap: true,
            expandedHeight: 300,
            //导航栏下拉时呈现高度拉伸效果
            flexibleSpace: FlexibleSpaceBar(
              background: FlutterLogo(),
              title: Text('FlexibleSpaceBar Title'),
              collapseMode: CollapseMode.parallax, //折叠时效果
              stretchModes: [
                StretchMode.blurBackground,
                StretchMode.fadeTitle
              ], //拉伸时效果
            )),