Question

鉴于PageView允许使用viewPortFraction显示下一个或上一个项目，如果用户点击其中一个项目，如何在项目之间滚动？如果用户用手指拖动列表，则滚动有效，但我也想启用onTap。

  child: PageView(
      children: <Widget>[
        ...widgetsList,
      ],
      scrollDirection: Axis.horizontal,
      controller: PageController(
        viewportFraction: 0.4,
        initialPage: 0,
      )),

Answer 1

您可以将每个页面包装在GestureDetector中，并且onTap使用jumpToPage或animateToPage来切换页面。如果每个页面上都有由于GestureDetector而无法访问的元素，则可能需要使用Stack小部件。

只需将当前 pageNo 传递到animateToPage。

这里有一个带有Container包装的示例，但是您也可以像孩子一样传递完整的页面。

GestureDetector(
      child: Container(
          width: double.infinity,
          height: 50.0,
          color: Colors.white60,
          child: Text('show')),
      onTap: () {
          _pageController.animateToPage(pageNo,
              duration: Duration(milliseconds: 250), curve: Curves.easeInOut);

          //// some alternative navigation:
          // _pageController.nextPage(
          //     duration: Duration(milliseconds: 250),
          //     curve: Curves.easeOut);
          //
          //// alternative just jump
          // _pageController.jumpToPage(pageNo);
      },)

Flutter Pageview-滚动on跳至下一个或上一个项目

1 个答案: