书接上文,来到了目录第二层,为了能更加直观酷炫地展现课程目录,应用了 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(),)