Flutter 首页必用组件NestedScrollView

移动开发作者： 2024-08-25 11:15:02

老孟导读：昨天Flutter 1.17版本重磅发布，新的版本主要是优化性能、修复bug，有人觉得此版本毫无亮点，但也从另一方面体现了Flutter目前针对移动端已经较为完善，想了解具体内容，文末有链接

NestedScrollView(
  headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
    return <Widget>[SliverAppBar(
      title: Text('老孟'),)];
  },body: ListView.builder(itemBuilder: (BuildContext context,int index){
    return Container(
      height: 80,color: Colors.primaries[index % Colors.primaries.length],alignment: Alignment.center,child: Text(
        '$index',style: TextStyle(color: Colors.white,fontSize: 20),),);
  },itemCount: 20,)

NestedScrollView(
  headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
    return <Widget>[SliverAppBar(
      expandedHeight: 230.0,pinned: true,flexibleSpace: FlexibleSpaceBar(
        title: Text('复仇者联盟'),background: Image.network(
          'http://img.haote.com/upload/20180918/2018091815372344164.jpg',fit: BoxFit.fitHeight,)

NestedScrollView(
  headerSliverBuilder: (BuildContext context,bool innerBoxIsScrolled) {
    return <Widget>[
      SliverAppBar(
        expandedHeight: 230.0,flexibleSpace: Padding(
          padding: EdgeInsets.symmetric(vertical: 8),child: PageView(),SliverPersistentHeader(
        pinned: true,delegate: StickyTabBarDelegate(
          child: TabBar(
            labelColor: Colors.black,controller: this._tabController,tabs: <Widget>[
              Tab(text: '资讯'),Tab(text: '技术'),],];
  },body: TabBarView(
    controller: this._tabController,children: <Widget>[
      RefreshIndicator(
        onRefresh: (){
          print(('onRefresh'));
        },child: _buildTabNewsList(_newsKey,_newsList),_buildTabNewsList(_technologyKey,_technologyList),)

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({@required this.child});

  @override
  Widget build(
      BuildContext context,double shrinkOffset,bool overlapsContent) {
    return Container(
      color: Theme.of(context).backgroundColor,child: this.child,);
  }

  @override
  double get maxExtent => this.child.preferredSize.height;

  @override
  double get minExtent => this.child.preferredSize.height;

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

NestedScrollView(
  scrollDirection: Axis.horizontal,reverse: true,...
)

_scrollController = ScrollController();

//监听滚动位置
    _scrollController.addListener((){
      print('${_scrollController.position}');
    });
    //滚动到指定位置
    _scrollController.animateTo(20.0);

CustomScrollView(
	controller: _scrollController,...
)