Flutter Wheel ListView 小部件内的按钮

Question

I am using a ListWheelScrollView more specific a clickable one. ( clickable_list_wheel_view )

I am trying to have a button inside my itemWidget but I can not click it. This is my 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,
    ),
  ),
);

Inside my MonthCardWidget I have this simple 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),
            ),
          ),

Everything is getting displayed just fine but onPressed is never called on my button . I guess the GestureDetector is overriding the button? Is there any workaround for this? I couldn't find anything on this.

The GestureDetector is simply on top of the 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,
    );
  }

Answer 1

The click will never reach your GestureDetector, you need to specify the click in the ClickableListWheelScrollView here:

  onItemTapCallback: (index) {
print(index)

},

If the print you have there isn't printing, then get with the ClickableListWheelScrollView plugin publisher. You'll need logic to reach the changes you want with the button based on the index number passed from the ClickableListWheelScrollView I think....so a map of setState functions might do it.

Think of the button just being a view, and you're just running the function logic in parallel to each button based on its position in the list. The button is buried under the list, you need a layer above the ListWheel, which is the Clickable plugin, but obviously it becomes disconnected from the button, so you need to create logic to link them based on the index value, which is the position of the object in the list.

What I typically do:

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

1. This Will return the index position of the item in your list. Use this to change a variable.

2. Wrap your scroller in a GestureDetector.

3. In the Gesture Detector, write or call a function that takes your index position variable and performs your function as you desire.

4. If you need to control where in your list position the scroll begins, or remember its position when you rebuild etc, use a FixedExtentScrollController with an initialItem.

Everything slaves off the index of the onSelectedItemChanged in this way, and you use the FixedExtentScrollController to set a starting position at build. Remember that the list begins at 0.