如何在 Stack 的子元素上使用 GestureDetector

Question

我正在设计个人资料图片小部件，我需要执行 2 个不同的任务。

编辑图标会更改个人资料图片，点击图片会放大图片，但我却收到了这些错误：

    I/flutter (21524): The following assertion was thrown building RawGestureDetector(state:
    I/flutter (21524): RawGestureDetectorState#6b90e(gestures: [tap])):
    I/flutter (21524): Incorrect use of ParentDataWidget.
    I/flutter (21524): Positioned widgets must be placed directly inside Stack widgets.
    I/flutter (21524): Positioned(no depth, top: 0.0, right: 2.0, dirty) has a Stack ancestor, but there are other widgets
    I/flutter (21524): between them:
    I/flutter (21524): - Listener(listeners: [down], behavior: deferToChild)
    I/flutter (21524): - _GestureSemantics
    I/flutter (21524): These widgets cannot come between a Positioned and its Stack.
    I/flutter (21524): The ownership chain for the parent of the offending Positioned was:
    I/flutter (21524):   Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ← Stack ← Padding ← Column ←
    I/flutter (21524):   Center ← DecoratedBox ← Container ← ⋯

这是我的代码：

      Stack(children: <Widget>[
                GestureDetector(
                  onTap : openImage
                  child: Container(
                    width: 120.0,
                    height: 120.0,
                    decoration: new BoxDecoration(
                        color: const Color(0xff7c94b6),
                        image: DecorationImage(
                          image: new NetworkImage(user.dp ),
                          fit: BoxFit.cover,
                        ),
                        borderRadius:
                        new BorderRadius.all(new Radius.circular(100.0)),
                        border: new Border.all(
                          color: Colors.white,
                          width: 2.0,
                        ),
                  ),
                ),
                GestureDetector(
                  onTap: uploadImage,
                  child: Positioned(
                    child: CircleAvatar(child: Icon(Icons.edit)),
                    right: 2.0, top: 0.0,),
                )
              ],
            ),

如何解决这个错误？

Answer 1

这是显示的日志中的关键详细信息：

"Positioned widgets must be placed directly inside Stack widgets."

此问题的原因是 Positioned 小部件包含在 GestureDetector 中。要解决此错误，请在 Stack 中添加 Positioned，然后用它包裹 GestureDetector。

Stack(
  children: <Widget>[
    GestureDetector(
      onTap: () {
        debugPrint('Clicked open image');
      },
      child: Container(
        width: 120.0,
        height: 120.0,
        ...
      ),
    ),
    Positioned(
      child: GestureDetector(
        onTap: () {
          debugPrint('Clicked edit image');
        },
        child: CircleAvatar(child: Icon(Icons.edit)),
      ),
      right: 2.0,
      top: 0.0,
    ),
  ],
),

如何在 Stack 的子元素上使用 GestureDetector

How to use GestureDetector on Stack's children elements

flutter

flutter-layout