如何创建一个可以向上/向下/向左/向右滑动的小部件？

Question

如何创建可以上下左右滑动的卡片？

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

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

谢谢！

Answer 1

您可以将“PageView”用作另一个“PageView”的子级：

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],
        ),
      ],
    );
  }

}

希望对你有用。