flutter —— SliverAppBar 的使用

效果

代码

class CustomScrollViewPage extends StatelessWidget {
  const CustomScrollViewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Scrollbar(
          child: CustomScrollView(
        slivers: [
          // 导航栏
          SliverAppBar(
            pinned: true,
            expandedHeight: 200,
            title: Text("HELLO"),
            leading: Center(child: Text('L')),
            flexibleSpace: FlexibleSpaceBar(
              title: Text("DEMO"),
              background: Image.asset("./images/demo.jpg", fit: BoxFit.cover,),
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.all(18),
            // 等价于 GridView
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 2,
                mainAxisSpacing: 2,
              ),
              delegate: SliverChildBuilderDelegate(
                (context, idx) => Text("网格, $idx"),
                childCount: 6,
              ),
            ),
          ),
          // 等价于 ListView 指定子项高度 itemExtent
          SliverFixedExtentList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => Center(
                child: Text("你好, $index"),
              ),
              childCount: 10,
            ),
            itemExtent: 50,
          ),
        ],
      )),
    );
  }
}

注：也可以直接使用 SliverPersistentHeader 来实现滑动顶部固定的需求。

参考

https://book.flutterchina.club/chapter6/custom_scrollview.html#_6-10-2-flutter-%E4%B8%AD%E5%B8%B8%E7%94%A8%E7%9A%84-sliver