flutter SliverAppBar使用

SliverAppBar是AppBar升级版,利用SliverAppBar可是实现scrollview滚动跟随appbar,还可以控制appbar隐藏和显示
SliverAppBar一般配合CustomScrollView使用

Scaffold(
      body: CustomScrollView(
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
        slivers: <Widget>[
          SliverAppBar(
            title: Text('data'),
            leading: Icon(Icons.arrow_back_ios),
            expandedHeight: 200,
            // floating: true,
            // snap: false,
            // pinned: true,
            // primary: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                'assets/icon_home_topbg.png',
                fit: BoxFit.none,
              ),
              // title: Container(
              //   decoration: BoxDecoration(
              //     gradient: LinearGradient(colors: [Colors.red, Colors.blue]),
              //   ),
              // ),
              // collapseMode: CollapseMode.parallax,
              titlePadding: EdgeInsets.all(0),
              centerTitle: true,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.centerLeft,
                  child: Text('aaaaaa'),
                  // Container(
                  //   child: Column(
                  //     crossAxisAlignment: CrossAxisAlignment.start,
                  //     children: <Widget>[
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       Text('data'),
                  //       // ListView(
                  //       //   shrinkWrap: true,
                  //       //   physics: NeverScrollableScrollPhysics(),
                  //       //   children: <Widget>[
                  //       //     Text('data'),
                  //       //     Text('data'),
                  //       //   ],
                  //       // )
                  //     ],
                  // ),
                  // ),
                );
              },
              childCount: 100,
            ),
            // itemExtent: 50,
          )
        ],
      ),
    );

SliverList和SliverFixedExtentList的区别在于item高度是否固定

原文地址:https://www.cnblogs.com/qqcc1388/p/12419966.html