如何在Flutter中禁用PageView中特定方向的滚动

huangapple go评论130阅读模式
英文:

How to disable scroll in PageView in a particular direction in flutter

问题

在你的Flutter应用中,你可以使用PageView组件来创建一个引导页屏幕,并且可以通过设置不同的滚动物理效果来禁用特定方向的滚动。以下是你的代码的翻译部分:

PageView(
  onPageChanged: (newValue) {
    // 更新页面
  },
  physics: activePage == 0 ||
          activePage == pages.length - 1
      ? const NeverScrollableScrollPhysics()
      : const PageScrollPhysics(),
  controller: pageController,
  children: [
    for (var page in pages) PageWidget(page: page),
  ],
)

在这段代码中,通过检查activePage的值来决定是否应该应用NeverScrollableScrollPhysics()PageScrollPhysics()作为PageView的物理效果。如果activePage为0(第一页)或最后一页,它将使用NeverScrollableScrollPhysics()来禁用滚动,否则将使用PageScrollPhysics()来启用滚动。

请确保在你的代码中正确处理activePagepages的值以便根据需要启用或禁用滚动。

英文:

I'm new to flutter and am learning about Pageview. In my app I have made an onboarding screen. Is there a way to disable scroll in a particular direction? What I'm trying to achieve is that the user should not be able to scroll/swipe left when they are on the first page and should not be able to scroll/swipe right when they are on the last page. I know you can disable scroll physics by using NeverScrollableScrollPhysics(), but is there a way to give it a direction?

Code:

PageView(
  onPageChanged: (newValue) {
    //Update the page
  },
  physics: activePage == 0 ||
          activePage == pages.length - 1
      ? const NeverScrollableScrollPhysics()
      : const PageScrollPhysics(),
  controller: pageController,
  children: [
    for (var page in pages) PageWidget(page: page),
  ],
)

答案1

得分: 0

你可以像这样实现这种行为:

将物理效果设置为 NeverScrollableScrollPhysics(),然后

你可以有一个“下一页”按钮,使用 pageView.animateToPage() 函数来动画切换到下一页

这将给你滑动的感觉,可以实现这种行为。

通过这种方法,你只能在你的 pageView 中前进,不能后退

如果有任何疑问,请告诉我。

英文:

You can achieve this behaviour like this

set physics as NeverScrollableScrollPhysics() then

you can have a next button, where you can use pageView.animateToPage() function to animate to next page

This will give you the feel of swiping and can achieve this behaviour.

Here by using this you can only move forward not backward in your pageView

If you have any doubts let me know

答案2

得分: 0

为了获得这种行为,您可以将 controller 分配给 pageview 并获取滑动方向。

然后,您可以根据需要阻止滚动。
请参考以下链接:

https://stackoverflow.com/a/63188690/15438326

英文:

To get that kind of behaviour you can give controller to pageview and get swipe direction.

Then you can block the scroll according to you.
Refer the link below

https://stackoverflow.com/a/63188690/15438326

答案3

得分: 0

要在Flutter中的PageView小部件中禁用特定方向的滚动,您可以使用physicsonPageChanged回调的组合来控制滚动行为。例如:

import 'package:flutter/material.dart';

class DisableScrollDirectionPageView extends StatefulWidget {
  @override
  _DisableScrollDirectionPageViewState createState() =>
      _DisableScrollDirectionPageViewState();
}

class _DisableScrollDirectionPageViewState
    extends State<DisableScrollDirectionPageView> {
  PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _currentPage);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _handlePageChange(int page) {
    setState(() {
      _currentPage = page;
    });
  }

  bool _isScrollable(int page) {
    // 仅为除页面2之外的页面启用滚动
    return page != 2;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('禁用滚动方向'),
      ),
      body: PageView(
        controller: _pageController,
        physics: _isScrollable(_currentPage)
            ? AlwaysScrollableScrollPhysics()
            : NeverScrollableScrollPhysics(),
        onPageChanged: _handlePageChange,
        children: <Widget>[
          Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                '页面 1',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
          Container(
            color: Colors.red,
            child: Center(
              child: Text(
                '页面 2',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
          Container(
            color: Colors.green,
            child: Center(
              child: Text(
                '页面 3',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

在上面的代码中,DisableScrollDirectionPageView小部件创建了一个包含三个页面的PageView_isScrollable方法检查当前页面索引,如果允许该页面滚动,则返回true,否则返回false。PageView的physics属性根据**_isScrollable**的值设置为AlwaysScrollableScrollPhysics()或NeverScrollableScrollPhysics()。

英文:

To disable scrolling in a particular direction in a PageView widget in Flutter, you can use a combination of physics and onPageChanged callback to control the scroll behavior. For example.
import 'package:flutter/material.dart';

class DisableScrollDirectionPageView extends StatefulWidget {
  @override
  _DisableScrollDirectionPageViewState createState() =&gt;
      _DisableScrollDirectionPageViewState();
}

class _DisableScrollDirectionPageViewState
    extends State&lt;DisableScrollDirectionPageView&gt; {
  PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _currentPage);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void _handlePageChange(int page) {
    setState(() {
      _currentPage = page;
    });
  }

  bool _isScrollable(int page) {
    // Enable scrolling only for pages other than page 2
    return page != 2;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(&#39;Disable Scroll Direction&#39;),
      ),
      body: PageView(
        controller: _pageController,
        physics: _isScrollable(_currentPage)
            ? AlwaysScrollableScrollPhysics()
            : NeverScrollableScrollPhysics(),
        onPageChanged: _handlePageChange,
        children: &lt;Widget&gt;[
          Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                &#39;Page 1&#39;,
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
          Container(
            color: Colors.red,
            child: Center(
              child: Text(
                &#39;Page 2&#39;,
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
          Container(
            color: Colors.green,
            child: Center(
              child: Text(
                &#39;Page 3&#39;,
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

In the above code DisableScrollDirectionPageView widget creates a PageView with three pages. The _isScrollable method checks the current page index and returns true if scrolling is enabled for that page, and false otherwise. The physics property of the PageView is set to either AlwaysScrollableScrollPhysics() or NeverScrollableScrollPhysics() based on the _isScrollable value.

答案4

得分: 0

Simply set physics of the PageView to ClampingScrollPhysics().

英文:

Found the answer. Simply set physics of the PageView to ClampingScrollPhysics().

huangapple
  • 本文由 发表于 2023年7月6日 12:43:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76625555.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定