如何根据触摸协调器将小部件的子位置对准此小部件？

Question

我有一个卡片小部件列表，我希望当用户触摸此确切的卡片时出现一些孩子，并使其与触摸点坐标相应地对齐，例如centerRight，topRight，bottomRight。

我该如何实现？这是一些伪代码来说明我的问题。

        var position = Alignment.bottomRight;

        InkWell(
          onTap: (){
            /// get touch point regards first container
            /// if touched in 1/3 of child's height, then position == Alignment.topRight, and so on
          },
          child: Container(
            height: 100, width: 100,
            child: Container(
              alignment: position,
            ),
          ),
        )

Answer 1

尝试一下并根据需要进行修改！

Alignment position = Alignment.center;
  double w = 0, h = 0, currentX = 0, currentY = 0;

  @override
  Widget build(BuildContext context) {
    w = context.size.width;
    h = context.size.height;

    return Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          alignment: position,
          width: double.infinity,
          height: double.infinity,
          child: GestureDetector(
            onTapUp: (det) {
              print(det.localPosition);
              setState(() {
                currentX = det.localPosition.dx;
                currentY = det.localPosition.dy;
                if (currentX <= (w / 2) && currentY <= (h / 2))
                  position = Alignment.topLeft;
                else if (currentX < (w / 2) && currentY > (h / 2))
                  position = Alignment.bottomLeft;
                else if (currentX > (w / 2) && currentY <= (h / 2))
                  position = Alignment.topRight;
                else if (currentX > (w / 2) && currentY > (h / 2))
                  position = Alignment.bottomRight;
                //and so on... centerLeft,centerRight, etc..
              });
            },
            child: Container(
              color: Colors.green,
              width: 150,
              height: 150,
            ),
          ),
        ));
  }