如何創建一個小部件可以在顫動中向上/向下/向左/向右滑動？

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

}

我希望它對你有用。