Flutter ListView 通过拖动选择项目答案

【问题标题】：Flutter ListView Selecting item by draggingFlutter ListView 通过拖动选择项目
【发布时间】：2020-10-16 22:04:02
【问题描述】：

只是想知道是否有人知道如何做到这一点。我在包含图像的 Flutter 应用程序中有一个水平列表视图。我想实现一个滑动机制，所以当我滑动时，中间的图像会被选中。

我尝试了 GestureDetector，但它与 ListView 不兼容，我也尝试了 Listener，但我只得到了指针的位置。

有没有办法实现这样的机制？

这是我目前拥有的列表查看：

这是它的代码：

new Listener(
    onPointerMove: (opm) {
      print("onPointerMove .. ${opm.position}");
    },
    child: ListView.builder(
      itemBuilder: (context, index) {
        EdgeInsets padding = index == 0
            ? const EdgeInsets.only(
                left: 20.0, right: 10.0, top: 4.0, bottom: 30.0)
            : const EdgeInsets.only(
                left: 10.0, right: 10.0, top: 4.0, bottom: 30.0);

        return new Padding(
          padding: padding,
          child: new InkWell(
            onTap: () {
              print('Card selected${index}');
            },
            onLongPress: () {
              print('Card long selected${index}');
            },
            child: CircleAvatar(
              backgroundImage:
                  ExactAssetImage('assets/img_${index % items.length}.jpg'),
              minRadius: 15,
              maxRadius: 60,
              //radius: 30,
            ),
          ),
        );
      },
      scrollDirection: Axis.horizontal,
      itemCount: items.length,
    ));

【问题讨论】：

rrtutors.com/description/…

标签： flutter dart mobile

【解决方案1】：

GestureDector 是你的选择

在 GestureDetector 中包裹 CircleAvatar

      GestureDetector(
        onVerticalDragStart: (_) { /* do selection logic */},
        child: CircleAvatar(
          backgroundImage:
              ExactAssetImage('assets/img_${index % items.length}.jpg'),
          minRadius: 15,
          maxRadius: 60,
          //radius: 30,
        ),
      ),

如果你还想拥有 InkWell 效果，那你就把它留在那里

但是，如果您将 GestureDetector 包装在 InkWell 中，反之亦然并收听相同的手势（例如 onTap），则只有一个小部件会触发该手势回调

【讨论】：