关于flutter:flutter-carouselslider-实现背景慢移动

6次阅读

共计 927 个字符，预计需要花费 3 分钟才能阅读完成。

书接上文，来到了目录第二层，为了能更加直观酷炫地展现课程目录，应用了 carousel_slider 插件，但光应用此插件仍然感觉枯燥，所以想实现一个滑动过程中背景跟着漫游的性能 (ps：不知此说法是否谨严)，如下所示

都怪笔者比拟愚蠢，思路不对，记录思路以示本人：
1. 一想能够动静设置 image 的 alignment，后果是没有动画成果，而是卡顿着变动
2. 二想这是动画成果, 是不是应该应用 AnimatedContainer，盘了一天没盘进去
3. 三想这个动作不就是滑动图片吗，茅塞顿开连忙应用 GestureDetector，无奈怎么播弄，onHorizontalDragUpdate 函数始终无奈跑进去，茅只能再度塞
4. 四想应用绝对底层的 Listener，尽管 onPointerMove 能够跑进去，无奈自己满腹经纶，拿不出一个 size 转 Alignment 而且让他们平滑静止的方程，最终放弃
5. 最终章五想，原来插件 carousel_slider 中有个属性 onScrolled ????，此时除了想给本人面门来几下之外，仍然没忘码码

1. 写 onScrolled 调用的函数

void callbackFunction(double covariant) {
 double step = covariant / this.courseList.length;
  setState(() {
 this.alignment =
        Alignment.lerp(Alignment.centerLeft, Alignment.centerRight, step);
  });
}

2.onScrolled 调用

CarouselSlider(
 options: CarouselOptions(
 autoPlay: false,
      enlargeCenterPage: true,
      enableInfiniteScroll: false,
      viewportFraction: 0.61,
      initialPage: 0,
      onScrolled: callbackFunction,
      height: double.infinity),
  items: courseList.map((item) {return this.courseItem(item);
  }).toList(),)

正文完