颤振：页面视图在更改屏幕时失去轮播答案

【问题标题】：Flutter : PageView loosing Carousel while changing the screen颤振：页面视图在更改屏幕时失去轮播
【发布时间】：2020-07-19 05:57:38
【问题描述】：

我正在使用以下代码使用 PageView 来轮播

PageView.builder(
                              onPageChanged: (value) {
                                setState(() {
                                  currentpage = value;
                                });
                              },
                              controller: controller,
                              itemCount: data.length,
                              itemBuilder: (context, index) {
                                return GestureDetector(
                                  onTap: () {
                                    debugPrint('Nilesh Rathod $index');
                                    if (index == 0) {
                                      Navigator.push(
                                              context,
                                              PageTransition(
                                                  type: PageTransitionType
                                                      .rightToLeft,
                                                  child: DetailPage()))
                                          .then((value) {
                                        debugPrint('nilu pilu');
                                        controller.jumpToPage(0);
                                      });
                                    }
                                  },
                                  child: AnimatedBuilder(
                                    animation: controller,
                                    builder: (context, child) {
                                      double value = 1.0;
                                      if (controller.position.haveDimensions) {
                                        value = controller.page - index;
                                        value = (1 - (value.abs() * .5))
                                            .clamp(0.0, 1.0);
                                      }

                                      return Align(
                                        alignment: Alignment.topCenter,
                                        child: SizedBox(
                                          height:
                                              Curves.easeOut.transform(value) *
                                                  300,
                                          width:
                                              Curves.easeOut.transform(value) *
                                                  250,
                                          child: child,
                                        ),
                                      );
                                    },
                                    child: Stack(children: <Widget>[
                                      index == 0
                                          ? Container(
                                              height: 300,
                                              width: 220,
                                              child: IconButton(
                                                onPressed: () {
                                                  Utils.changeScreen(
                                                      context, CreateTripApp());
                                                },
                                                icon: Image.asset(
                                                  'assets/images/flight.png',
                                                  height: 120,
                                                  fit: BoxFit.cover,
                                                  width: 100,
                                                ),
                                              ),
                                              decoration: BoxDecoration(
                                                image: DecorationImage(
                                                  image: AssetImage(
                                                      'assets/images/home.png'),
                                                  fit: BoxFit.cover,
                                                ),
                                                borderRadius: BorderRadius.all(
                                                  Radius.circular(20.0),
                                                ),
                                              ))
                                          : Container(
                                              height: 300,
                                              width: 220,
                                              decoration: BoxDecoration(
                                                  color: index % 2 == 0
                                                      ? Colors.red
                                                      : Colors.green,
                                                  borderRadius:
                                                      BorderRadius.all(
                                                          Radius.circular(
                                                              20.0))),
                                            ),
                                      Positioned(
                                          bottom: 30,
                                          right: 10,
                                          left: 10,
                                          child: index == 0
                                              ? Align(
                                                  alignment:
                                                      Alignment.bottomCenter,
                                                  child: Text(
                                                    Constants.createYourTrip,
                                                    textAlign: TextAlign.center,
                                                    style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 16.0,
                                                      fontFamily:
                                                          Fonts.standardBold,
                                                    ),
                                                  ))
                                              : Align(
                                                  alignment:
                                                      Alignment.bottomCenter,
                                                  child: Text(
                                                    'Hello There',
                                                    textAlign: TextAlign.center,
                                                    style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 16.0,
                                                      fontFamily:
                                                          Fonts.standardBold,
                                                    ),
                                                  )))
                                    ]),
                                  ),
                                );
                              })

它的工作正常，例外

但是当导航到另一个页面时，我失去了轮播效果，请检查下面的屏幕截图是否相同

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

【问题讨论】：

标签： flutter dart flutter-layout flutter-pageview

【解决方案1】：

有点晚了，但我通过在 controller.position.haveDimensions 为 false 并且它不是起始索引（在我的例子中为零）时设置值来解决这个问题。

if (_controller.position.haveDimensions) {
  value = _controller.page - index;
  value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
}
else if (index != 0)
  value = 0.5;

【讨论】：