Как создать виджет, который может свайпнуть вверх / вниз / влево / вправо при флаттере?

Как создать карту можно свайпом вверх / вниз / влево / вправо во флаттере?

Я вижу, что можно использовать PageView, но это только для одной ориентации вверх-вниз или влево-вправо.

Итак, как объединить все направления, чтобы обнаружить движение Wigdet в трепетании?

Спасибо!


flutter pageviews
person Truong Hoang    schedule 23.10.2020    source источник
comment
Объясните, пожалуйста, чего вы хотите достичь. Если вы хотите определять только жесты смахивания, это можно сделать с помощью GestureDetector. Если вы хотите перетащить виджет вверх / вниз / влево / вправо, тогда есть Draggable виджет.   -  person Ravi Singh Lodhi    schedule 23.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать 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],
        ),
      ],
    );
  }

}

Надеюсь, это будет вам полезно.

person Saeed Fekri    schedule 23.10.2020
comment
почему я не думаю об этом! Большое спасибо! - person Truong Hoang; 26.10.2020