Image 视差效应|颤振中的可滚动背景图像

我正在尝试实现一个可滚动的背景图像（视差）。 就像在主屏幕发射器中一样

例如： 在Evie启动器中：

我尝试过使用文档中提到的

AnimatedBuilder

，如下所示

我使用

ValueNotifier

作为AnimatedBuilder小部件动画的侦听器

完整的代码是这样的

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“页面浏览滚动”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：主页（），
);
}
}
类主页扩展了StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
ValueNotifier\u通知程序；
双预告器；
双getOffset（）{
如果（_notifier.value==0&&u prevnotifier！=null）{
返回通知程序；
}
返回_notifier.value；
}
@凌驾
无效处置（）{
_通知程序？.dispose（）；
super.dispose（）；
}
@凌驾
void initState（）{
super.initState（）；
_通知程序=ValueNotifier（0）；
_prevnotifier=\u notifier.value；
_notifier.addListener(
(){
打印（'object${u notifier.value}'）；
如果（_notifier.value！=0）
_prevnotifier=\u notifier.value；
}
);
}
@凌驾
小部件构建（构建上下文）{
打印（“大小为${MediaQuery.of（context.Size}”）；
返回脚手架(
主体：堆栈(
儿童：[
动画生成器(
动画：_通知程序，
构建器：（上下文，ux）{
返回Transform.translate(
偏移量：偏移量（-getOffset（）*60,0），
孩子：Image.network(
"https://w.wallhaven.cc/full/r2/wallhaven-r276qj.png",
高度：MediaQuery.of（context）.size.height，
适合：BoxFit.fit高度
),
);
},
),
通知页面视图(
通知者：\通知者，
),
],
),
);
}
}
类NotifyingPageView扩展StatefulWidget{
最终估价通知人通知人；
constnotifyingpageview（{Key，this.notifier}）：super（Key:Key）；
@凌驾
_NotifyingPageViewState createState（）=>\u NotifyingPageViewState（）；
}
类_NotifyingPageViewState扩展状态{
int_上一页；
页面控制器_页面控制器；
void _onScroll（）{
//当到达滚动结束时更改页面
//使用来自PageView的onPageChanged回调会导致页面在
//下一张卡的一半击中视口的中心，而视口的中心不是
//我想要什么
如果（_pageController.page.toInt（）==_pageController.page）{
_previousPage=\u pageController.page.toInt（）；
}
widget.notifier？.value=\u pageController.page-\u previousPage；
}
@凌驾
void initState（）{
_pageController=pageController(
初始页：0，
视口分数：0.9，
)..addListener（_onScroll）；
_previousPage=\u pageController.initialPage；
super.initState（）；
}
List _pages=List.generate(
10,
（索引）{
返回容器(
身高：10，
对齐：对齐.center，
颜色：颜色。透明，
子：文本(
“卡号$index”，
样式：TextStyle(
颜色：Colors.teal，
fontWeight:fontWeight.bold，
尺寸：25，
),
),
);
},
);
@凌驾
小部件构建（构建上下文）{
返回页面视图(
儿童：_页，
控制器：_pageController，
);
}
}

可以找到图像

现在我有两个问题：

• 使用

  fit:BoxFit.fitHeight

  时，图像未完全溢出。现在就像
• 因为动画完成后该值将变为零，因此捕捉方式如下：

我尝试在

\u notifier.value

变为零之前存储该值，并在它返回零时使用它，但它导致了我在上面的视频中向您展示的那种奇怪的转换

你认为可以做些什么来制作像flutter中的可滚动墙纸这样的东西

像这样的

---

这并不像我想象的那么琐碎

TLDR；阅读评论

我使用了我提到的

ValueNotifier

来控制滚动

然后，我使用了一个带有对齐的属性，而不是

Transform.translate

。在渲染之前，它是基于

通知程序.value

计算的

并以全屏模式显示图像：

我和一个孩子一起使用，

decoration

是一个

BoxDecoration

和它的

image

作为

ImageProvider

所有代码都可以在github上找到。（阅读评论）

---

在github上有一些详细的信息和一个不太复杂的替代实现，我已经回答了您提出的问题！我知道只链接的答案是不鼓励的，但代码是巨大的。无法确定我的github帐户10年后是否会保留。这是一个很好的解决方案，它很有帮助。事实上，我用一个水平列表视图对其进行了更改。