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高度是否固定


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM