Wheel ListView 小部件内的颤振按钮

Posted 2023-02-23

【中文标题】Wheel ListView 小部件内的颤振按钮

【英文标题】：Flutter Button inside a Wheel ListView Widget

【发布时间】：2021-06-10 22:31:35

【问题描述】：

我使用的是ListWheelScrollView，更具体的是clickable。 (clickable_list_wheel_view)

我试图在我的itemWidget 中添加一个button，但我无法单击它。这是我的list：

return ClickableListWheelScrollView(
  scrollController: _scrollController,
  itemHeight: _itemHeight,
  itemCount: months.length,
  scrollOnTap: true,
  onItemTapCallback: (index) 
    print(index)
  ,
  child: ListWheelScrollView.useDelegate(
    controller: _scrollController,
    itemExtent: _itemHeight,
    physics: FixedExtentScrollPhysics(),
    diameterRatio: 3,
    squeeze: 0.95,
    onSelectedItemChanged: (index) 
      // print(index);
    ,
    childDelegate: ListWheelChildBuilderDelegate(
      builder: (context, index) => MonthCardWidget(
        month: months[index],
      ),
      childCount: months.length,
    ),
  ),
);

在我的MonthCardWidget 里面我有这个简单的button：

          Container(
            height: 45,
            width: 45,
            color: Colors.transparent,
            child: IconButton(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              onPressed: () 
                print('flip');
              ,
              icon: SvgPicture.asset('assets/images/flip.svg',
                  height: 20, width: 20),
            ),
          ),

一切都显示得很好，但我的button 从未调用过onPressed。我猜GestureDetector 覆盖了按钮？有什么解决方法吗？我在这方面找不到任何东西。

GestureDetector 只是在listView 之上：

@override
  Widget build(BuildContext context) 
    if (_listHeight == .0) 
      return MeasureSize(
        child: Container(
          child: widget.child,
        ),
        onChange: (value) 
          setState(() 
            _listHeight = value.height;
          );
        ,
      );
    

    return GestureDetector(
      onTap: _onTap,
      onTapUp: (tapUpDetails) 
        _tapUpDetails = tapUpDetails?.localPosition;
      ,
      child: widget.child,
    );
  

【问题讨论】：

您在描述中提到了 GestureDetector，但它不在您共享的代码中。

@JoãoSoares 我链接了clickableListWheelView。基本上整个list 都包裹在GestureDetector 中。

但是我们看不到这一点，因为您还没有共享那部分代码。您在 GestureDetector 中设置的选项等。如果您想获得帮助，请分享可能影响您问题的代码。

@JoãoSoares 更新了我的问题，这有帮助吗？就像我说的，那是来自我链接的包。我在那里没有改变任何东西。您可以查看链接，也许这会使事情更清楚

【参考方案1】：

点击永远不会到达您的 GestureDetector，您需要在此处指定 ClickableListWheelScrollView 中的点击：

  onItemTapCallback: (index) 
print(index)

,

如果您的打印没有打印，请使用 ClickableListWheelScrollView 插件发布者。您需要根据从 ClickableListWheelScrollView 传递的索引号，通过按钮实现所需更改的逻辑我认为....所以 setState 函数的映射可能会做到这一点。

认为按钮只是一个视图，您只是根据每个按钮在列表中的位置并行运行功能逻辑。按钮是埋在列表下面的，需要在ListWheel上面加一层，就是Clickable插件，但是很明显它和按钮断开了，所以需要根据索引值来创建逻辑，也就是位置列表中的对象。

我通常做什么：

onSelectedItemChanged: (index) 
  // print(index);
,

这将返回列表中项目的索引位置。使用它来更改变量。

将滚动条包裹在 GestureDetector 中。

在手势检测器中，编写或调用一个函数，该函数采用您的索引位置变量并按照您的需要执行您的函数。

如果您需要控制滚动在列表位置的起始位置，或者在重建时记住其位置等，请使用带有 initialItem 的 FixedExtentScrollController。

一切都以这种方式从 onSelectedItemChanged 的​​索引中分离出来，并且您使用 FixedExtentScrollController 在构建时设置起始位置。请记住，列表从 0 开始。

【讨论】：

感谢您的回答！我知道这是一个棘手的问题......而且我还没有找到解决方案。我还开了一个问题：github.com/Cilestal/clickable_list_wheel_view/issues/1

我查看了您的帖子，但我并没有完全按照您要执行的操作。我刚做了一些。我没有使用您上面使用的包，而是将 Scroller 包装在手势检测器中……我将编辑我的答案以解释得更清楚一些。