当一个小部件在它前面时在页面视图中滑动

Question

我里面有一个 Stack 和一个 PageView。 Stack 中我的 PageView 前面还有一些其他小部件。像这样：

Stack(
  PageView(...),
  Container(...),
  Text(...),
  ....
),

现在，如果我的手指触摸到其他小部件，我会尝试滑动 PageView，滑动停止和发送工作。

我怎样才能让它发挥作用？

Answer 1

Widget 树的 UI 优先级是从下到上，这意味着在渲染 Stack 小部件时，PageView 小部件放置在最后一层，这就是为什么你面临滑动问题。您可能有充分的理由将其他小部件放在 PageView 之前。为了解决这个问题，你可以使用另一个GestureDetector作为Stackchildren上的最后一个Widget，并使用PageController在页面之间切换。

Stack(
  PageView(...),
  Container(...),
  Text(...),
///  .... 
    GestureDetector(),///* you can test and set animation, direction, duration etc
),

完整小部件

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

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

class _SwapPVState extends State<SwapPV> {
  PageController controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      alignment: Alignment.center,
      children: [
        PageView(
          controller: controller,
          children: [
            Container(
              color: Colors.red,
            ),
            Container(
              color: Colors.amber,
            ),
            Container(
              color: Colors.green,
            ),
          ],
        ),
        Container(
          color: Colors.pink.withOpacity(.2),
          child: Text("OverLap Container"),
        ),
        Align(alignment: Alignment(0, .1), child: Text("Another OverLapText")),

        ///THis will controll the PageView
        GestureDetector(
          onTap: () {},
          onPanUpdate: (details) {
            // Swiping in right direction.
            if (details.delta.dx > 0) {
              controller.nextPage(
                  duration: Duration(milliseconds: 200), curve: Curves.easeIn);
            }

            // Swiping in left direction.
            if (details.delta.dx < 0) {
              controller.previousPage(
                  duration: Duration(milliseconds: 200),
                  curve: Curves.easeInOut);
            }
          },
        )
      ],
    ));
  }
}

当一个小部件在它前面时在页面视图中滑动

Swipe in PageView when a widget is in front of it in flutter

flutter

flutter-widget

flutter-pageview