Flutter Sliver滾動(dòng)組件的演示代碼

更新時(shí)間：2021年11月17日 16:19:24 作者：xiangxiongfly915

本文通過(guò)實(shí)例代碼給大家介紹了Flutter Sliver滾動(dòng)組件的相關(guān)知識(shí)，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

Flutter Sliver滾動(dòng)組件

SliverList & SliverGrid

需要同時(shí)滾動(dòng)ListView和GridView時(shí)可以使用SliverList和SliverGrid。

在這里插入圖片描述

CustomScrollView(
    slivers: [
        SliverList(
            delegate: SliverChildBuilderDelegate(
                (context, index) {
                    return Container(
                        height: 50,
                        color: Colors.primaries[index % Colors.primaries.length],
                    );
                },
                childCount: 5,
            ),
        ),
        SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 5,
                mainAxisSpacing: 5,
            ),
            delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                    return Container(
                        color: Colors.primaries[index % Colors.primaries.length],
                    );
                },
                childCount: 20,
            ),
        ),
    ],
)

SliverAppBar

pinned：是否固定在屏幕頂部。

expandedHeight：展開(kāi)區(qū)域的高度。

flexibleSpace：展開(kāi)取消顯示內(nèi)容。

在這里插入圖片描述

CustomScrollView(
    slivers: [
        SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
                title: const Text("SliverAppBar"),
                background: Image.asset("images/avatar.jpg", fit: BoxFit.cover),
            ),
        ),
        SliverFixedExtentList(
            delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                    return Container(
                        alignment: Alignment.center,
                        color: Colors.primaries[index % Colors.primaries.length],
                        child: Text("$index"),
                    );
                },
            ),
            itemExtent: 50.0,
        ),
    ],
)

SliverPersistentHeader

SliverPersistentHeader組件可以控制滾動(dòng)的最大高度和最小高度，類似SliverAppBar效果。

build：顯示內(nèi)容。

maxExtent & minExtent：滾動(dòng)的高度范圍。

shouldRebuild：是否需要更新。

在這里插入圖片描述

CustomScrollView(
    slivers: [
        SliverPersistentHeader(
            pinned: true,
            delegate: MySliverPersistentHeaderDelegate(),
        ),
        SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 5,
                mainAxisSpacing: 5,
            ),
            delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                    return Container(
                        color: Colors.primaries[index % Colors.primaries.length],
                    );
                },
            ),
        ),
    ],
)

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
    @override
    Widget build(
        BuildContext context, double shrinkOffset, bool overlapsContent) {
        return Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text(
                "hello world",
                style: TextStyle(color: Colors.white),
            ),
        );
    }

    @override
    double get maxExtent => 200;

    @override
    double get minExtent => 50;

    @override
    bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
        return false;
    }
}

SliverToBoxAdapter

CustomScrollView只能包含Sliver組件，如果需要使用普通組件可以使用SliverToBoxAdapter。

在這里插入圖片描述

CustomScrollView(
    slivers: [
        SliverToBoxAdapter(
            child: Container(
                height: 200,
                color: Colors.black26,
                alignment: Alignment.center,
                child: Text("hello world"),
            ),
        ),
        SliverList(
            delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                    return Container(
                        height: 60,
                        color: Colors.primaries[index % Colors.primaries.length],
                    );
                },
                childCount: 50,
            ),
        ),
    ],
)

CustomScrollView & NestedScrollView

CustomScrollView組件可以將多個(gè)組件組合在一起，具有統(tǒng)一的滾動(dòng)效果，但是CustomScrollView只能嵌套Sliver系列的組件，如SliverList、SliverGrid、SliverPadding、SliverAppBar等。

NestedScrollView可以協(xié)調(diào)兩個(gè)滾動(dòng)組件滑動(dòng)。NestedScrollView在邏輯上將可滾動(dòng)組件分為header和body兩部分，heade部分只能接收Sliver類型的組件，而body部分可以接收任意類型的組件。

NestedScrollView+SliverAppBar+SliverFixedExtentList+ListView

在這里插入圖片描述

NestedScrollView(
    //Sliver組件
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
            SliverAppBar(
                title: const Text("嵌套ListView"),
                pinned: true, //固定AppBar             
                forceElevated: true,
            ),
            SliverFixedExtentList(
                itemExtent: 50,
                delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                        return ListTile(title: Text("$index"));
                    },
                    childCount: 5,
                ),
            ),
        ];
    },
    //滾動(dòng)組件
    body: ListView.builder(
        padding: const EdgeInsets.all(8),
        physics: const ClampingScrollPhysics(), //需要
        itemCount: 30,
        itemBuilder: (BuildContext context, int index) {
            return SizedBox(
                height: 50,
                child: Center(child: Text("item $index")),
            );
        },
    ),
)

NestedScrollView+SliverAppBar+CustomScrollView

在這里插入圖片描述

NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
            SliverAppBar(
                floating: true,
                snap: true,
                expandedHeight: 200,
                forceElevated: innerBoxIsScrolled,
                flexibleSpace: FlexibleSpaceBar(
                    background: Image.asset(
                        "images/logo.png",
                        fit: BoxFit.cover,
                    ),
                ),
            ),
        ];
    },
    body: CustomScrollView(
        slivers: [buildSliverList(50)],
    ),
)

優(yōu)化聯(lián)動(dòng)效果

SliverAppBar+CustomScrollView組合，當(dāng)反向滑動(dòng)時(shí)，SliverAppBar就會(huì)整體回到屏幕頂部，出現(xiàn)遮擋問(wèn)題，為了解決該問(wèn)題，可以用在header里用SliverOverlapAbsorber組件包裹SliverAppBar，body里Sliver列表最前面添加一個(gè)SliverOverlapInjector。

NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
            SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                    floating: true,
                    snap: true,
                    expandedHeight: 200,
                    forceElevated: innerBoxIsScrolled,
                    flexibleSpace: FlexibleSpaceBar(
                        background: Image.asset(
                            "images/logo.png",
                            fit: BoxFit.cover,
                        ),
                    ),
                ),
            ),
        ];
    },
    body: Builder(
        builder: (BuildContext context) {
            return CustomScrollView(
                slivers: [
                    SliverOverlapInjector(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                    ),
                    buildSliverList(50),
                ],
            );
        },
    ),
)

NestedScrollView+TabBarView

在這里插入圖片描述

class MyPageView extends StatefulWidget {
    late List<String> tabs;

    MyPageView({Key? key, required this.tabs}) : super(key: key);

    @override
    State<StatefulWidget> createState() {
        return _MyPageViewState();
    }
}

class _MyPageViewState extends State<MyPageView>
    with SingleTickerProviderStateMixin {
    late TabController _controller;

    @override
    void initState() {
        super.initState();
        _controller = TabController(length: widget.tabs.length, vsync: this);
    }

    @override
    void dispose() {
        super.dispose();
        _controller.dispose();
    }

    @override
    Widget build(BuildContext context) {
        return NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return [
                    SliverOverlapAbsorber(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                        sliver: SliverAppBar(
                            title: const Text("hi Flutter"),
                            floating: true,
                            snap: true,
                            forceElevated: innerBoxIsScrolled,
                            bottom: TabBar(
                                controller: _controller,
                                tabs: widget.tabs.map((e) => Tab(text: e)).toList(),
                            ),
                        ),
                    ),
                ];
            },
            body: TabBarView(
                controller: _controller,
                children: widget.tabs.map((e) {
                    return Builder(builder: (BuildContext context) {
                        return CustomScrollView(
                            key: PageStorageKey(e),
                            slivers: [
                                SliverOverlapInjector(
                                    handle:
                                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                                ),
                                SliverPadding(
                                    padding: const EdgeInsets.all(9),
                                    sliver: buildSliverList(50),
                                ),
                            ],
                        );
                    });
                }).toList(),
            ),
        );
    }
}

到此這篇關(guān)于Flutter Sliver滾動(dòng)組件的文章就介紹到這了,更多相關(guān)Flutter 滾動(dòng)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: