Flutter中Listener搭配Container margin时无法正常工作的问题排查

问题描述 #

我正在开发一个Joystick（操纵杆），需要在上面绘制线条划分区域，因此使用Stack和Positioned组件叠加圆形Container与线条。通过Listener组件获取手指位置：当圆形Container（第50行）无margin时，组件位于左上角，Listener可正常更新坐标（可通过文本框查看）；但添加margin后，手指触摸时坐标不再更新。我需要用margin精确定位Container，以便后续判断手指所在区域，请问为何添加margin后坐标不更新，该如何解决？

代码示例 #

import 'package:flutter/services.dart';
import 'dart:math' as math;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.landscapeLeft,
    DeviceOrientation.landscapeRight,
  ]);
  runApp(const MaterialApp(home: MyHomePage()));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double x = 0.0;
  double y = 0.0;

  void _updateLocation(PointerEvent details) {
    setState(() {
      x = details.position.dx;
      y = details.position.dy;
    });
  }

  @override
  Widget build(BuildContext context) {
    double screenheight = MediaQuery.of(context).size.height;
    //double screenwidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          /*Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/backgroundapp.jpg'), scale: 0.5),
            ),
          ),*/
          Listener(
            onPointerMove: _updateLocation,
            child: Container(
              margin: EdgeInsets.fromLTRB(
                  screenheight * 0.5 - screenheight * 0.44,
                  screenheight * 0.5,
                  0,
                  0),
              height: screenheight * 0.44,
              width: screenheight * 0.44,
              decoration: const BoxDecoration(
                  color: Color.fromARGB(130, 0, 0, 0), shape: BoxShape.circle),
            ),
          ),
          const LineJoystick(angle: 11.25),
          const LineJoystick(angle: 33.75),
          const LineJoystick(angle: 56.25),
          const LineJoystick(angle: 78.75),
          const LineJoystick(angle: 101.25),
          const LineJoystick(angle: 123.75),
          const LineJoystick(angle: 146.25),
          const LineJoystick(angle: 168.75),
          const LineJoystick(angle: 191.25),
          const LineJoystick(angle: 213.75),
          const LineJoystick(angle: 236.25),
          const LineJoystick(angle: 258.75),
          const LineJoystick(angle: 281.25),
          const LineJoystick(angle: 303.75),
          const LineJoystick(angle: 326.25),
          const LineJoystick(angle: 348.75),
          Text(
            'The cursor is here: (${x.toStringAsFixed(2)}, ${y.toStringAsFixed(2)})',
          ),
        ],
      ),
    );
  }
}

class LinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = const Color.fromARGB(100, 255, 255, 255)
      ..strokeWidth = 1;

    canvas.drawLine(
      Offset(size.width * 0.67, size.height * 0.5),
      Offset(size.width * 0.87, size.height * 0.5),
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class LineJoystick extends StatefulWidget {
  const LineJoystick({required this.angle, super.key});
  final double angle;

  @override
  State<LineJoystick> createState() => _LineJoystickState();
}

class _LineJoystickState extends State<LineJoystick> {
  @override
  Widget build(BuildContext context) {
    double screenheight = MediaQuery.of(context).size.height;
    return Positioned(
      top: screenheight * 0.5,
      left: screenheight * 0.5 - screenheight * 0.44,
      child: Transform.rotate(
        angle: widget.angle * math.pi / 180 * -1,
        child: Container(
          color: Colors.transparent,
          height: screenheight * 0.44,
          width: screenheight * 0.44,
          child: CustomPaint(
            foregroundPainter: LinePainter(),
          ),
        ),
      ),
    );
  }
}

问题原因 #

Listener的触摸响应范围是它的子组件实际占据的布局空间，而margin是Container外部的间距，不属于Container的布局范围。当给Container添加margin后，Listener的有效响应区域还是原来的Container大小，但它被margin推到了新位置，导致触摸视觉上的圆形区域时，其实并没有触碰到Listener的响应范围，所以坐标不会更新。

解决方法 #

不要用margin定位，改用Positioned组件来控制Listener所在Container的位置，这样既能精确定位，又能保证Listener的响应范围和视觉区域一致：

1. 将Listener嵌套在Positioned中，用top/left属性替代margin
2. 去掉Container的margin，把定位逻辑移到Positioned上

修改后的核心代码：

Positioned(
  top: screenheight * 0.5,
  left: screenheight * 0.5 - screenheight * 0.44,
  child: Listener(
    onPointerMove: _updateLocation,
    child: Container(
      height: screenheight * 0.44,
      width: screenheight * 0.44,
      decoration: const BoxDecoration(
          color: Color.fromARGB(130, 0, 0, 0), shape: BoxShape.circle),
    ),
  ),
),

额外优化建议 #

如果需要计算触摸点相对于操纵杆中心的坐标，可以在_updateLocation中转换坐标：

void _updateLocation(PointerEvent details) {
  setState(() {
    // 获取操纵杆的全局位置
    final renderBox = context.findRenderObject() as RenderBox;
    final joystickOffset = renderBox.localToGlobal(Offset(
      screenheight * 0.5 - screenheight * 0.44,
      screenheight * 0.5,
    ));
    // 计算相对于操纵杆中心的坐标
    x = details.position.dx - joystickOffset.dx - screenheight * 0.44 / 2;
    y = details.position.dy - joystickOffset.dy - screenheight * 0.44 / 2;
  });
}

这样后续判断手指区域时会更方便，不需要处理屏幕全局坐标。

内容的提问来源于stack exchange，提问作者Max