颤动：Inkwell 在堆栈小部件中不起作用

Question

I created a stack viewpager by this reference :

  body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      
      Stack(
      children: [
        Positioned.fill(
          child: Align(
            alignment: Alignment.centerLeft,
            child: SizedBox(
              width: _itemWidth,
              child: FractionallySizedBox(
              child: InkWell(
                onTap: () => debugPrint("clicked"), ///this part not works
                child: PageViewItem(
                  index: _firstItemIndex,
                  width: _itemWidth,
                  url: model[_firstItemIndex],
                  ),
                ),
              ),
            ),
          ),
        ),
        SizedBox(
          height: 250,
          child: PageView.builder(
            padEnds: false,
            controller: _controller,
            itemBuilder: (context, index) {
              return Opacity(
                opacity: index <= _firstItemIndex ? 0 : 1,
                child: PageViewItem(
                  index: index,

                  width: _itemWidth,
                  url: model[index],

                ),
              );
            },
            itemCount: model.length,
          ),
        ),
      ],
),
    ],

in this part :

 InkWell(
    onTap: () => debugPrint("clicked"), ///this part not works
    child: PageViewItem(
      index: _firstItemIndex,
      width: _itemWidth,
      url: model[_firstItemIndex],
      ),
    ),

onTap Not working because is under PageView.builder . do you have any idea to fix this issue?

Answer 1

That's because top widget in the stack, stack works as a layers, the last child in the children list will be the greatest zIndex one, so any widget below it is not accessible, you need to bring it to front to activate the click, swap the children and making the InkWell 's positioned Widget the last child in the children will solve your issue

Stack(
  children: [
    SizedBox(
      height: 250,
      child: PageView.builder(
        padEnds: false,
        controller: _controller,
        itemBuilder: (context, index) {
          return Opacity(
            opacity: index <= _firstItemIndex ? 0 : 1,
            child: PageViewItem(
              index: index,

              width: _itemWidth,
              url: model[index],

            ),
          );
        },
        itemCount: model.length,
      ),
    ),
    Positioned.fill(
      child: Align(
        alignment: Alignment.centerLeft,
        child: SizedBox(
          width: _itemWidth,
          child: FractionallySizedBox(
          child: InkWell(
            onTap: () => debugPrint("clicked"), ///this part not works
            child: PageViewItem(
              index: _firstItemIndex,
              width: _itemWidth,
              url: model[_firstItemIndex],
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),