如何创建一个可以在flutter中滑动up/down/left/right的widget？

Question

如何创建可以在flutter中刷up/down/left/right的卡片？

我看到可以使用 PageView，但它仅适用于上下或左右一个方向。

那么如何结合所有方向来检测在flutter中滑动Wigdet？

谢谢！

Answer 1

您可以将 'PageView' 用作另一个 'PageView' 的 child:

class _TrainigState extends State<TrainingPage> {

  PageController hPagerController = PageController(keepPage: true);
  PageController vPagerController = PageController(keepPage: true);
  double mWidth;
  double mHeight;

  @override
  Widget build(BuildContext context) {

    mWidth = MediaQuery.of(context).size.width;
    mHeight = MediaQuery.of(context).size.height;
    return PageView(
      controller: hPagerController,
      children: [
        _verticalPageView([Colors.blue, Colors.purpleAccent, Colors.pinkAccent, Colors.orangeAccent]),
        _verticalPageView([Colors.yellow, Colors.orange, Colors.deepOrange, Colors.red]),
        _verticalPageView([Colors.green, Colors.lightGreenAccent, Colors.greenAccent, Colors.lightBlueAccent]),
      ],
    );
  }

  Widget _verticalPageView(List colors) {
    return PageView(
      controller: vPagerController,
      scrollDirection: Axis.vertical,
      children: [
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[0],
        ),
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[1],
        ),
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[2],
        ),
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[3],
        ),
      ],
    );
  }

}

希望对你有用

如何创建一个可以在flutter中滑动up/down/left/right的widget？

How to create a widget can swipe up/down/left/right in flutter?

flutter

pageviews