Flutter中如何获取GestureDetector宽度并计算点击位置占比？

要计算点击位置占容器宽度的比例，核心是获取容器的实际渲染宽度，下面提供两种可行方案：

方案一：使用LayoutBuilder获取容器宽度约束 #

LayoutBuilder可以直接拿到父组件传递给子组件的尺寸约束，适配动态宽度场景：

Scaffold(
  backgroundColor: Colors.white,
  body: Center(
    child: LayoutBuilder(
      builder: (context, constraints) {
        // constraints.maxWidth 为容器的实际可用宽度（已扣除margin）
        return GestureDetector(
          onTapDown: (val) {
            final containerWidth = constraints.maxWidth;
            final positionRatio = val.localPosition.dx / containerWidth;
            print("点击位置占比: ${positionRatio.toStringAsFixed(2)}");
          },
          child: Container(
            decoration: const BoxDecoration(gradient: LinearGradient(colors: [Colors.blue, Colors.red])),
            height: 100,
            margin: const EdgeInsets.all(20),
          ),
        );
      },
    ),
  ),
);

方案二：使用GlobalKey获取容器实际渲染尺寸 #

如果需要在其他逻辑中也调用容器尺寸，可通过GlobalKey获取组件的RenderBox：

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

  @override
  State<WaterTempPage> createState() => _WaterTempPageState();
}

class _WaterTempPageState extends State<WaterTempPage> {
  final _containerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: GestureDetector(
          onTapDown: (val) {
            final renderBox = _containerKey.currentContext?.findRenderObject() as RenderBox?;
            if (renderBox != null) {
              final containerWidth = renderBox.size.width;
              final positionRatio = val.localPosition.dx / containerWidth;
              print("点击位置占比: ${positionRatio.toStringAsFixed(2)}");
            }
          },
          child: Container(
            key: _containerKey,
            decoration: const BoxDecoration(gradient: LinearGradient(colors: [Colors.blue, Colors.red])),
            height: 100,
            margin: const EdgeInsets.all(20),
          ),
        ),
      ),
    );
  }
}

注意事项 #

• 两种方案均自动适配窗口大小变化，无需手动监听尺寸改动
• localPosition.dx是相对于容器的局部坐标，直接除以容器宽度即可得到正确比例

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