Flutter中如何设置PageView仅允许从屏幕边缘滑动切换页面

这里有两种可直接落地的实现方案：

• 方案一：自定义PageScrollPhysics（推荐，侵入性最低）
  通过重写PageView滚动物理的拖拽触发逻辑，仅接受边缘区域的滑动事件，原有PageView的滚动动画、切换逻辑完全保留：

import 'package:flutter/material.dart';

class EdgeOnlyPageScrollPhysics extends PageScrollPhysics {
  /// 触发滑动的边缘宽度，单位为逻辑像素，可按需调整
  final double edgeTriggerWidth;

  const EdgeOnlyPageScrollPhysics({
    super.parent,
    required this.edgeTriggerWidth,
  });

  @override
  EdgeOnlyPageScrollPhysics applyTo(ScrollPhysics? ancestor) {
    return EdgeOnlyPageScrollPhysics(
      parent: buildParent(ancestor),
      edgeTriggerWidth: edgeTriggerWidth,
    );
  }

  @override
  Drag? dragStart(ScrollStartPosition position, DragStartDetails details, VoidCallback dragCancelCallback) {
    // 获取当前屏幕宽度
    final screenWidth = View.of(position.context).physicalSize.width / View.of(position.context).devicePixelRatio;
    // 判断滑动起始点是否在左右边缘的触发范围内
    final isInEdgeArea = details.globalPosition.dx < edgeTriggerWidth || details.globalPosition.dx > screenWidth - edgeTriggerWidth;
    if (!isInEdgeArea) {
      // 非边缘区域的滑动直接忽略
      return null;
    }
    return super.dragStart(position, details, dragCancelCallback);
  }
}

只需将该物理配置设置给你的PageView即可生效：

PageView(
  controller: _pageController,
  // 示例设置边缘触发宽度为25逻辑像素
  physics: const EdgeOnlyPageScrollPhysics(edgeTriggerWidth: 25),
  children: [
    firstScreen(),
    secondScreen(),
  ],
)

• 方案二：手动手势拦截（适合子组件存在复杂横向手势冲突的场景）
  先禁用PageView自带的滑动能力，自己监听触摸事件判断是否触发滑动：

// 类内部定义变量
bool _isDraggingFromEdge = false;
final double _edgeTriggerWidth = 25;

@override
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  return Listener(
    onPointerDown: (event) {
      // 按下时判断是否在边缘触发区域
      _isDraggingFromEdge = event.position.dx < _edgeTriggerWidth || event.position.dx > screenWidth - _edgeTriggerWidth;
    },
    child: GestureDetector(
      onHorizontalDragUpdate: (details) {
        if (!_isDraggingFromEdge) return;
        // 跟随拖拽偏移滚动页面
        _pageController.jumpTo(_pageController.offset - details.delta.dx);
      },
      onHorizontalDragEnd: (details) {
        if (!_isDraggingFromEdge) return;
        // 拖拽结束后根据速度判断是否切换页面，和原生PageView行为对齐
        const thresholdVelocity = 500;
        if (details.primaryVelocity! > thresholdVelocity) {
          _pageController.previousPage(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        } else if (details.primaryVelocity! < -thresholdVelocity) {
          _pageController.nextPage(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        } else {
          // 速度不足则回弹到当前页面
          _pageController.animateToPage(
            _pageController.page!.round(),
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        }
      },
      child: PageView(
        controller: _pageController,
        // 禁用原生滑动能力
        physics: const NeverScrollableScrollPhysics(),
        children: [
          firstScreen(),
          secondScreen(),
        ],
      ),
    ),
  );
}

内容的提问来源于stack exchange，提问作者jonneroni