list - 如何编写 PageView 在背景也滚动的同时滚动普通列表？

Question

我想构建一个屏幕，其中包含可以滚动的项目列表，这些项目具有独特的背景，当我继续滚动时，它也应该滚动（看起来像滚动）。这是一个示例，如您所见，当我滚动项目时，背景变化非常平滑，就好像它是它的一部分一样。

到目前为止，我已经尝试操纵 PageViews 来实现这一点，但我现在最好的方法是在项目上使用单个 PageView，我已经在其中编写了代码，当页面更改时，一个接一个地移动背景。这是代码：

页面预览：

Column(
              children: [
                Container(
                  width: sizes.width(context, 414),
                  height: sizes.height(context, 100),
                  decoration: topImage == null ? BoxDecoration(color: Colors.blue) : BoxDecoration(
                    image: DecorationImage(
                      image: FileImage(topImage),
                      fit: BoxFit.fitWidth
                    )
                  ),
                ), // first image

                Container(
                  width: sizes.width(context, 414),
                  height: sizes.height(context, 696),
                  decoration: mainImage == null ? BoxDecoration(color: colours.black()) : BoxDecoration(
                      image: DecorationImage(
                          image: FileImage(mainImage),
                          fit: BoxFit.fitHeight
                      )
                  ),
                  child: Stack(
                    children: [
                      // a widget here
                      PageView.builder(
                        itemCount: (allModes.length + 1),
                        onPageChanged: (index) {
                          setState(() {
                            topImage = index == 0 ? null : File(allModes[index-1].wallpaperPath);
                            mainImage = index == allModes.length ? null : File(allModes[index].wallpaperPath);
                            bottomImage = index >= (allModes.length-1) ? null : File(allModes[index+1].wallpaperPath);
                          });
                        },
                        itemBuilder: (context, index) {

                          if(index == allModes.length) {
                            return Text(
                              "add + " + " :: " + index.toString(),
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: colours.white(),
                                  fontFamily: 'ProductSans',
                                  fontWeight: FontWeight.bold,
                                  fontSize: _pageController.page.toInt() == index ? 36 : 24
                              ),
                            );
                          }
                          else {
                            return Text(
                              allModes[index].title + " :: " + index.toString(),
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                  color: colours.white(),
                                  fontFamily: 'ProductSans',
                                  fontWeight: FontWeight.bold,
                                fontSize: _pageController.page.toInt() == index ? 36 : 24
                              ),
                            );
                          }
                        },
                        scrollDirection: Axis.vertical,
                        controller: _pageController,
                      ),
                    ],
                  ),
                ), // main image

                Container(
                  width: sizes.width(context, 414),
                  height: sizes.height(context, 100),
                  decoration: bottomImage == null ? BoxDecoration(color: Colors.greenAccent) : BoxDecoration(
                      image: DecorationImage(
                          image: FileImage(bottomImage),
                          fit: BoxFit.fitWidth
                      )
                  ),
                ), // last image
              ],
            )

请帮我解决我还能做什么，我的一个朋友建议我使用 ScrollView 作为包装器和可扩展的小部件作为它的孩子，但我不明白如何实际做到这一点。

编辑：这是示例的图像：

标签： listflutterdartscrollflutter-pageview