Flutter：InkWell 在 Card 中完全不起作用

Posted 2023-02-22

【中文标题】Flutter：InkWell 在 Card 中完全不起作用

【英文标题】：Flutter: InkWell completely non-functional in Card

【发布时间】：2021-05-01 13:51:54

【问题描述】：

下面粘贴的是基于 Card 的小部件的构建方法，该小部件用作 ListWheelScrollView 中的列表元素。 TweenAnimationBuilder 只是在 Card 小部件中为当前选定的列表项设置背景颜色变化的动画。

Widget build(BuildContext context) 
Color primary = Theme
    .of(context)
    .primaryColor;
Color secondary = Colors.white;

return new TweenAnimationBuilder(
    tween: new ColorTween(
        begin: secondary, end: selected ? primary : secondary),
    duration: new Duration(milliseconds: 300),
    builder: (BuildContext context, Color color, Widget child) 
      return new Card(
          color: color,
          child: new InkWell(
              splashColor: Colors.blue,
              child: new Container(
                  height: 75,
                  width: 400,
                  child: new Center(
                      child: new Text(quiz.title)
                  )
              ),
              onTap: () => print("Does nothing")
          )
      );
    
);

无论我做什么，卡片上都不会出现视觉飞溅，onTap 处理程序也不会执行。 我已经尝试了我在这里看到的所有解决方案。对这个真的很困惑。

【参考方案1】：

我不知道你是怎么做的，试试这个代码：

Widget build(BuildContext context) 
  var primary = Theme.of(context).primaryColor;
  var secondary = Colors.white;
  var selected = true;
  return Scaffold(
    body: TweenAnimationBuilder(
      tween: ColorTween(begin: secondary, end: selected ? primary : secondary),
      duration: Duration(milliseconds: 300),
      builder: (BuildContext context, Color color, Widget child) 
        return Card(
          color: color,
          child: InkWell(
            splashColor: Colors.blue,
            onTap: () => print('Does nothing'),
            child: Container(
              height: 75,
              width: 400,
              child: Center(child: Text('Title')),
            ),
          ),
        );
      ,
    ),
  );

【讨论】：

将 TweenAnimationBuilder 包裹在 Scaffold 中没有任何作用。父树如下所示：SafeArea > Scaffold > Column > Expanded > Container > ListWheelScrollView.useDelegate > QuizCard。上述方法是 QuizCard 的构建方法。如果有帮助，请提供更多详细信息：ListWheelScrollView 委托是 ListWheelChildBuilderDelegate 和 ScrollController 是 FixedExtentScrollController。

【参考方案2】：

不幸的是，在我的搜索查询变得更有创意之后，我发现答案是这就是 Flutter 的工作原理。 ListWheelScrollView 的子项无法接收手势输入。考虑到小部件的功能，我想这应该不足为奇。为了避免其他人感到沮丧，请参阅下面链接的 Google 的 Flutter Github 上的重复 SO 问题和讨论。还链接了一个 Pub 解决方法包，通过我正在研究的 Flutter Github 讨论找到。

ListTile OnTap is working when I use ListView. But when i use ListWheelScrollView it doesnt work

https://github.com/flutter/flutter/issues/38803

https://pub.dev/packages/clickable_list_wheel_view