GestureDetector 在 ListWheelScrollView 中不起作用

Question

GestureDetector 未检测到 ListWheelScrollView 内的 onTap。 如果我包装整个 ListWheel 效果很好，但是这样做会在点击屏幕上的任何位置时导致导航。我希望小部件检测仅由 ListWheelScrollView.useDelegate() 返回的触摸

我在 GIthub 和 StackOverFlow 上发现了类似的问题，但当时的解决方案并没有解决我的问题。 注意：给 HitTestBehavior.translucent 行为不起作用。

class ListCard extends StatefulWidget {
  @override
  _ListCardState createState() => _ListCardState();
}

class _ListCardState extends State<ListCard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 10.0, right: 10, top: 15),
            child: SearchBar(),
          ),
          Expanded(child: RecipeListWheel()),
        ],
      ),
    );
  }
}

class RecipeListWheel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListWheelScrollView.useDelegate(
      diameterRatio: 1.2,
      perspective: 0.0001,
      itemExtent: 150,
      childDelegate: ListWheelChildBuilderDelegate(
          builder: (BuildContext context, int index) {
        if (index < 0 || index > 10 || index > recipeList.length - 1) {
          return null;
        }
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0),
          child: Container(
            height: 240,
            color: Colors.transparent,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    onTap: () {
                      print('user tapped first Inkwell');
                    },
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.blueGrey,
                          image: DecorationImage(
                              image: CachedNetworkImageProvider(
                                  '${recipeList[index].image}'),
                              fit: BoxFit.cover),
                          borderRadius: BorderRadius.circular(20),
                          boxShadow: [
                            BoxShadow(
                              color: recipeList[index].type == 'nveg'
                                  ? Colors.red.withOpacity(0.9)
                                  : Colors.green.withOpacity(0.9),
                              spreadRadius: 3,
                              blurRadius: 10,
                            )
                          ]),
                      child: Text('hello how are you'),
                    ),
                  ),
                ),
                Expanded(
                    child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      boxShadow: kboxShadow,
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(20),
                          bottomRight: Radius.circular(20))),
                  height: 120,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        recipeList[index].name,
                        textAlign: TextAlign.center,
                        style: kNepaliTextStyle.copyWith(
                            fontWeight: FontWeight.bold),
                      ),
                      Text('Veg'),
                    ],
                  ),
                ))
              ],
            ),
          ),
        );
      }),
    );
  }
}

Answer 1

尝试添加

gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>[ new Factory<OneSequenceGestureRecognizer>(() => new EagerGestureRecognizer(),), ].toSet(),

到您希望将 onTap 分配到的小部件。