c/c++语言开发共享Flutter Sliver滚动组件的演示代码

目录flutter sliver滚动组件sliverlist & slivergridsliverappbarsliverpersistentheaderslivertoboxadapterc

目录
  • flutter sliver滚动组件
    •  sliverlist & slivergrid
    • sliverappbar
    • sliverpersistentheader
    • slivertoboxadapter
    • customscrollview & nestedscrollview
      • nestedscrollview+sliverappbar+sliverfixedextentlist+listview
      • nestedscrollview+sliverappbar+customscrollview
      • 优化联动效果
      • nestedscrollview+tabbarview

%ignore_a_1%

flutter sliver滚动组件

 sliverlist & slivergrid

需要同时滚动listview和gridview时可以使用sliverlist和slivergrid。

Flutter Sliver滚动组件的演示代码

  customscrollview(      slivers: [          sliverlist(              delegate: sliverchildbuilderdelegate(                  (context, index) {                      return container(                          height: 50,                          color: colors.primaries[index % colors.primaries.length],                      );                  },                  childcount: 5,              ),          ),          slivergrid(              griddelegate: slivergriddelegatewithfixedcrossaxiscount(                  crossaxiscount: 3,                  crossaxisspacing: 5,                  mainaxisspacing: 5,              ),              delegate: sliverchildbuilderdelegate(                  (buildcontext context, int index) {                      return container(                          color: colors.primaries[index % colors.primaries.length],                      );                  },                  childcount: 20,              ),          ),      ],  )  

sliverappbar

pinned:是否固定在屏幕顶部。

expandedheight:展开区域的高度。

flexiblespace:展开取消显示内容。

Flutter Sliver滚动组件的演示代码

  customscrollview(      slivers: [          sliverappbar(              pinned: true,              expandedheight: 200,              flexiblespace: flexiblespacebar(                  title: const text("sliverappbar"),                  background: image.asset("images/avatar.jpg", fit: boxfit.cover),              ),          ),          sliverfixedextentlist(              delegate: sliverchildbuilderdelegate(                  (buildcontext context, int index) {                      return container(                          alignment: alignment.center,                          color: colors.primaries[index % colors.primaries.length],                          child: text("$index"),                      );                  },              ),              itemextent: 50.0,          ),      ],  )  

sliverpersistentheader

sliverpersistentheader组件可以控制滚动的最大高度和最小高度,类似sliverappbar效果。

build:显示内容。

maxextent & minextent:滚动的高度范围。

shouldrebuild:是否需要更新。

Flutter Sliver滚动组件的演示代码

  customscrollview(      slivers: [          sliverpersistentheader(              pinned: true,              delegate: mysliverpersistentheaderdelegate(),          ),          slivergrid(              griddelegate: slivergriddelegatewithfixedcrossaxiscount(                  crossaxiscount: 3,                  crossaxisspacing: 5,                  mainaxisspacing: 5,              ),              delegate: sliverchildbuilderdelegate(                  (buildcontext context, int index) {                      return container(                          color: colors.primaries[index % colors.primaries.length],                      );                  },              ),          ),      ],  )  

  class mysliverpersistentheaderdelegate extends sliverpersistentheaderdelegate {      @override      widget build(          buildcontext context, double shrinkoffset, bool overlapscontent) {          return container(              color: colors.blue,              alignment: alignment.center,              child: text(                  "hello world",                  style: textstyle(color: colors.white),              ),          );      }        @override      double get maxextent => 200;        @override      double get minextent => 50;        @override      bool shouldrebuild(covariant sliverpersistentheaderdelegate olddelegate) {          return false;      }  }  

slivertoboxadapter

customscrollview只能包含sliver组件,如果需要使用普通组件可以使用slivertoboxadapter。

Flutter Sliver滚动组件的演示代码

  customscrollview(      slivers: [          slivertoboxadapter(              child: container(                  height: 200,                  color: colors.black26,                  alignment: alignment.center,                  child: text("hello world"),              ),          ),          sliverlist(              delegate: sliverchildbuilderdelegate(                  (buildcontext context, int index) {                      return container(                          height: 60,                          color: colors.primaries[index % colors.primaries.length],                      );                  },                  childcount: 50,              ),          ),      ],  )  

customscrollview & nestedscrollview

customscrollview组件可以将多个组件组合在一起,具有统一的滚动效果,但是customscrollview只能嵌套sliver系列的组件,如sliverlist、slivergrid、sliverpadding、sliverappbar等。

nestedscrollview可以协调两个滚动组件滑动。nestedscrollview在逻辑上将可滚动组件分为header和body两部分,heade部分只能接收sliver类型的组件,而body部分可以接收任意类型的组件。

nestedscrollview+sliverappbar+sliverfixedextentlist+listview

Flutter Sliver滚动组件的演示代码

  nestedscrollview(      //sliver组件      headersliverbuilder: (buildcontext context, bool innerboxisscrolled) {          return [              sliverappbar(                  title: const text("嵌套listview"),                  pinned: true, //固定appbar                               forceelevated: true,              ),              sliverfixedextentlist(                  itemextent: 50,                  delegate: sliverchildbuilderdelegate(                      (buildcontext context, int index) {                          return listtile(title: text("$index"));                      },                      childcount: 5,                  ),              ),          ];      },      //滚动组件      body: listview.builder(          padding: const edgeinsets.all(8),          physics: const clampingscrollphysics(), //需要          itemcount: 30,          itembuilder: (buildcontext context, int index) {              return sizedbox(                  height: 50,                  child: center(child: text("item $index")),              );          },      ),  )  

nestedscrollview+sliverappbar+customscrollview

Flutter Sliver滚动组件的演示代码

  nestedscrollview(      headersliverbuilder: (buildcontext context, bool innerboxisscrolled) {          return [              sliverappbar(                  floating: true,                  snap: true,                  expandedheight: 200,                  forceelevated: innerboxisscrolled,                  flexiblespace: flexiblespacebar(                      background: image.asset(                          "images/logo.png",                          fit: boxfit.cover,                      ),                  ),              ),          ];      },      body: customscrollview(          slivers: [buildsliverlist(50)],      ),  )  

优化联动效果

sliverappbar+customscrollview组合,当反向滑动时,sliverappbar就会整体回到屏幕顶部,出现遮挡问题,为了解决该问题,可以用在header里用sliveroverlapabsorber组件包裹sliverappbar,body里sliver列表最前面添加一个sliveroverlapinjector。

  nestedscrollview(      headersliverbuilder: (buildcontext context, bool innerboxisscrolled) {          return [              sliveroverlapabsorber(                  handle: nestedscrollview.sliveroverlapabsorberhandlefor(context),                  sliver: sliverappbar(                      floating: true,                      snap: true,                      expandedheight: 200,                      forceelevated: innerboxisscrolled,                      flexiblespace: flexiblespacebar(                          background: image.asset(                              "images/logo.png",                              fit: boxfit.cover,                          ),                      ),                  ),              ),          ];      },      body: builder(          builder: (buildcontext context) {              return customscrollview(                  slivers: [                      sliveroverlapinjector(                          handle: nestedscrollview.sliveroverlapabsorberhandlefor(context),                      ),                      buildsliverlist(50),                  ],              );          },      ),  )  

nestedscrollview+tabbarview

Flutter Sliver滚动组件的演示代码

  class mypageview extends statefulwidget {      late list<string> tabs;        mypageview({key? key, required this.tabs}) : super(key: key);        @override      state<statefulwidget> createstate() {          return _mypageviewstate();      }  }    class _mypageviewstate extends state<mypageview>      with singletickerproviderstatemixin {      late tabcontroller _controller;        @override      void initstate() {          super.initstate();          _controller = tabcontroller(length: widget.tabs.length, vsync: this);      }        @override      void dispose() {          super.dispose();          _controller.dispose();      }        @override      widget build(buildcontext context) {          return nestedscrollview(              headersliverbuilder: (buildcontext context, bool innerboxisscrolled) {                  return [                      sliveroverlapabsorber(                          handle: nestedscrollview.sliveroverlapabsorberhandlefor(context),                          sliver: sliverappbar(                              title: const text("hi flutter"),                              floating: true,                              snap: true,                              forceelevated: innerboxisscrolled,                              bottom: tabbar(                                  controller: _controller,                                  tabs: widget.tabs.map((e) => tab(text: e)).tolist(),                              ),                          ),                      ),                  ];              },              body: tabbarview(                  controller: _controller,                  children: widget.tabs.map((e) {                      return builder(builder: (buildcontext context) {                          return customscrollview(                              key: pagestoragekey(e),                              slivers: [                                  sliveroverlapinjector(                                      handle:                                      nestedscrollview.sliveroverlapabsorberhandlefor(context),                                  ),                                  sliverpadding(                                      padding: const edgeinsets.all(9),                                      sliver: buildsliverlist(50),                                  ),                              ],                          );                      });                  }).tolist(),              ),          );      }  }  

到此这篇关于flutter sliver滚动组件的文章就介绍到这了,更多相关flutter 滚动组件内容请搜索<计算机技术网>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网>!

需要了解更多c/c++开发分享Flutter Sliver滚动组件的演示代码,都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请点击右边联系管理员删除。

如若转载,请注明出处:https://www.ctvol.com/c-cdevelopment/993014.html

(0)
上一篇 2021年12月26日
下一篇 2021年12月26日

精彩推荐