【问题标题】:Flutter - How to reset the current page index in PageView (after card swipe)?Flutter - 如何重置PageView中的当前页面索引(刷卡后)?
【发布时间】:2021-10-03 07:17:24
【问题描述】:

我有一个简单的 PageView.builder:

  @override
void initState() {
 super.initState();
 _pageController =
    PageController(initialPage: 0, keepPage: true, viewportFraction: 1);
_pageController.addListener(() {
  setState(() {
      _activeImageIndex = _pageController.page!.toInt();
    });
  });
 }

......

            child: PageView.builder(
            scrollDirection: Axis.vertical,
            controller: _pageController,
            itemCount: lstUserImages.length,
            onPageChanged: (page) {
              setState(() {
                _activeImageIndex = page;
              });
            },
            itemBuilder: (context, index) {
              return GestureDetector(
                child: Image.asset(
                  lstUserImages[index],
                  fit: BoxFit.cover,
                ),
              );
            }),

它工作正常,除了当我刷卡时,它不会将页面索引重置为 0(用于下一张卡)。因此,如果对于一张卡片,我正在查看第三张图片(索引 = 2),那么在我刷完那张卡片后,下一张卡片就会加载第三张图片。

我有可用的 onSwipeComplete:

                  swipeCompleteCallback:
                  (CardSwipeOrientation orientation, int index) {
               
                setState(() {

 //WHAT DO I DO HERE SO THAT THE PAGE INDEX IS SET TO ZERO AGAIN..??
                  
                  //isCardChanged = true;
                  //_pageController.jumpToPage(0);
                  _pageController = PageController(
                      initialPage: 0, keepPage: true, viewportFraction: 1);

                });
              },

【问题讨论】:

  • 跳转到页面应该可以工作。我怀疑创建一个新控制器是否会解决这种情况......
  • 当您说滑动时,您的意思是滑动并删除它还是只是滑动?
  • 滑动删除
  • 这应该可以工作...api.flutter.dev/flutter/widgets/ScrollController/detach.html.. 它适用于滚动控制器,但也适用于页面控制器
  • 或者你可以使用一个可关闭的小部件,自己实现平滑删除

标签: flutter dart flutter-pageview swipecardview


【解决方案1】:

只需将 TinderSwapCard 内容更新为

TinderSwapCard(
    orientation: AmassOrientation.BOTTOM,
    totalNum: 3,
    stackNum: 3,
    swipeEdge: 4.0,
    maxWidth: MediaQuery.of(context).size.width * 0.9,
    maxHeight: MediaQuery.of(context).size.width * 0.9,
    minWidth: MediaQuery.of(context).size.width * 0.8,
    minHeight: MediaQuery.of(context).size.width * 0.8,
    cardBuilder: (context, index) {
      /// to reset the [_pageController] to a new value
      /// preventing the "multiple PageViews are attached to the same PageController" from appears
      _pageController = PageController(
          initialPage: 0, keepPage: true, viewportFraction: 1);

      return PageView.builder(
          scrollDirection: Axis.vertical,
          controller: _pageController,
          itemCount: lstUserImages.length,
          onPageChanged: (page) => setState(() => _activeImageIndex = page),
          itemBuilder: (context, index) {
            return Image.network(
              lstUserImages[index],
              fit: BoxFit.cover,
            );
          });
    },
    cardController: cardController,
    swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
      /// at [TinderSwapCard] swiping ensure the [_pageController] scrolled to the zero index

      setState(() {
        _pageController.jumpToPage(0);
      });
    },
  )

【讨论】:

  • 不起作用;这个逻辑到底在做什么?我不认为它会将索引重置为零。
  • 我的理解是,你想删除刷过的项目并滚动到第一个项目。我更新了答案,请查看它
  • 感谢您的努力,但我认为您的理解并不正确。我正在使用 tinder_swipe_cards。每张卡片都有多个图像(由 PageView 显示)。在我刷完一张卡片后,一张新卡片出现了(同样有多个图像)。现在,问题是当我滚动卡片的图像时,如果我不在图像上。 2我刷卡,然后出现的下一张卡,也设置为(它的)图像编号。 2,而它应该在图像编号上。 1(索引 0)。因此,我认为需要在 swipeCompleteCallback 方法中进行更改。
  • 我找不到包“tinder_swipe_cards”,请附上链接
猜你喜欢
  • 2020-03-16
  • 2013-07-21
  • 1970-01-01
  • 2020-12-24
  • 2015-12-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-02
  • 1970-01-01
相关资源
最近更新 更多