如何在flutter中使可点击的小部件位于堆栈后面

Question

出于某种目的，我在堆栈中有两个

scaffold

小部件..并且每个

scaffold

都有自己的内容。 第二个脚手架具有透明的背景颜色，因此第一个脚手架是可见的。

Stack(
  children: [
    Scaffold(
      body: GestureDetector(
        onTap: () {},
        child: myBody(),
      ),
    ),
    Scaffold(
      backgroundColor: Colors.transparent,
      body: ListView.builder(
        itemBuilder: (context, index) => ...,
      ),
    )
  ],
),

第一个

GestureDetector

中的

Scaffold

不起作用，这是因为脚手架堆栈

注意：我无法用

Scaffold

包裹第二个

IgnorePointer

，因为它具有可点击的 ListView.bulder，它也会忽略任何指针

我该如何解决这个问题×_O

Answer 1

您可以从第二个脚手架列表项点击获取回调方法。并在级别上创建一个函数，该函数将在第一个脚手架上提供

GestureDetector

。

void main(List<String> args) {
  Widget myBody() {
    return Container(
      color: Colors.cyanAccent.withOpacity(.3),
    );
  }

  void topLevelGesture() {
    debugPrint("got hit on GestureDetector");
  }

  runApp(
    MaterialApp(
      home: Stack(
        children: [
          Scaffold(
            body: GestureDetector(
              onTap: topLevelGesture,
              child: myBody(),
            ),
          ),
          Scaffold(
            backgroundColor: Colors.transparent,
            body: ListView.builder(
              itemBuilder: (context, index) => ListTile(
                title: Text("item $index"),
                onTap: () {
                  topLevelGesture();
                  print("tapped $index");
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

Answer 2

我这样做的方法是获取第一个堆栈中小部件的位置和大小，然后根据第一个小部件的偏移和大小将其定位在自定义可点击小部件中

body: Stack(
  alignment: Alignment.topLeft,
  children: [
    PartBehindView(), // 1
    PartFrontView(), // 2
    _customClickableView1Widget(context),
  ],
),

在第一个小部件中，我使用 GlobalObjectKey，在自定义可点击小部件中，我调用相同的 GlobalObjectKey，然后获取偏移量和大小，以应用于自定义可点击小部件

也许还有另一种更好的方法。但对我来说这已经足够了并且效果很好

Answer 3

您可以将手势设置为堆栈外部，并且使用此内部列表单击也可以工作，但是当您将第一个脚手架主体设置为可点击时，它不起作用，因为第二个脚手架覆盖了它。

GestureDetector(
         onTap(){}
         child:Stack(
    children[
       Scaffold(
       body:   myBody()
        
         )
      Scaffold(
       backGroundColor: Colors.transparent
       body: ListView.bulder(){....}
       )
     ]
    ))

Answer 4

您需要在堆栈小部件的末尾添加可点击的小部件，如下所示：

   Stack(
    children[
      firstWidget(),
      GestureDetector(
      onTap(){},
      child:  secondWidget()
      )
      
   ]
   )

Answer 5

只需像这样使用

IgnorePointer

作为

secondWidget()

，

firstWidget()

就可以点击。

    Stack(
        children[
          firstWidget(),
          IgnorePointer(
            child: secondWidget(),
          ),
        ]
    )