Flutter笔记--Sliver用法

这一节主要简单总结一下Sliver相关组件，它是用在CustomScrollView中，用来实现各种复杂的滚动效果,它的slivers属性里可以放置各种sliver组件。

栗子:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SliverPage extends StatefulWidget {
  SliverPage({Key key}) : super(key: key);
  _SliverPageState createState() => _SliverPageState();
}

class _SliverPageState extends State<SliverPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // appBar: AppBar(
        //   title: Text("SliverList学习"),
        // ),
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
             title: Text("Title"),
             expandedHeight: 240,
             pinned: true,
             flexibleSpace: FlexibleSpaceBar(
               title: Text('Flutter Background'),
               background: Image
                   .network("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
               ,fit: BoxFit.cover,
               ),
             ),
            ),
            SliverToBoxAdapter(
              child:Container(
                height: 105,
                child:  Center(child: Text("HelloWorld"),),
              ),
            ),
            SliverPadding(padding: EdgeInsets.only(top: 45),
              sliver: SliverToBoxAdapter(child: Container(child:Text("Play")),),
            ),
            SliverList(delegate:
            SliverChildBuilderDelegate((content,index) {
              return Container(
                height: 65,
                color: Colors.primaries[index % Colors.primaries.length],
              );
            },childCount: 20)
            ),
          ],
        ),
      ),
    );
  }
}

说明:

1.SliverAppBar , 是一个可伸缩的头部，可以实现上拉收起，下拉展开效果;
1.1 expandedHeight: 最大扩展高度
1.2 flexibleSpace: 扩展内容区域
1.3 floating: 为true则在滚动时优先滚动，有下拉动作先appbar后flexibleSpace，反之亦然
1.4 snap: 为true时没有变化，正在查证
1.5 pinned：为true则appbar不消失，在下拉时会多划出一段距离SliverAppBar才开始滚动

2.SliverPersistentHeader
SliverPersistentHeader有点类似SliverAppBar，同样可以收起和展开，可以放置到slivers任何一个位置;

3 SliverList类似ListView，它有两种表现形式：SliverChildBuilderDelegate和SliverChildListDelegate，
两者区别在于SliverChildBuilderDelegate可以加载不确定数量的列表，而SliverChildListDelegate只能加载固定已知数量。

Flutter笔记--Sliver用法

猜你喜欢