首页 > 解决方案 > 在颤振中如何使带有平移手势的内部小部件不会与PageView冲突

问题描述

我在 PageView 有一个带有平移手势的小部件,并且 PageView 可以水平滑动,当我水平平移小部件时,PageView 会移动。

我期望的是平移手势可以移动页面视图中的小部件,而不是移动页面视图

这是图片。

在此处输入图像描述

这是演示代码”

import 'package:flutter/material.dart';


class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        itemBuilder: (ctx, index) {
          return ChildPage(
            index: index,
          );
        },
        itemCount: 2,
      ),
    );
  }
}

class ChildPage extends StatefulWidget {
  final int index;

  const ChildPage({Key? key, required this.index}) : super(key: key);

  @override
  _ChildPageState createState() => _ChildPageState();
}

class _ChildPageState extends State<ChildPage> {
  Offset offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
              top: offset.dy,
              left: offset.dx,
              child: GestureDetector(
                onPanUpdate: (details) {
                  print("hh");
                  offset = offset.translate(details.delta.dx, details.delta.dy);
                  setState(() {});
                },
                child: Container(
                  color: Colors.yellow,
                  width: 100,
                  height: 100,
                ),
              ))
        ],
      ),
    );
  }
}

标签: androidiosflutterflutter-layoutflutter-pageview

解决方案


使用 RawGestureDectector,并使用水平和垂直手势来避免这个解决方案


推荐阅读