Flutter中图片缩放时保持叠加图标固定位置的技术问询

你的问题出在图标和InteractiveViewer是同级的Stack子元素，缩放时只有图片被变换，图标仍基于父Stack的固定坐标布局，导致偏移。要让图标和图片保持相对位置，需将图标与图片放在InteractiveViewer的同一个子组件内，让它们作为整体被缩放。

修改后的代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Image Zoom Sample';

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Zoom(),
      ),
    );
  }
}

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

  @override
  State<Zoom> createState() => _ZoomState();
}

class _ZoomState extends State<Zoom> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
        color: Colors.white,
        alignment: Alignment.center,
        child: InteractiveViewer(
          // 将图片和图标放在同一个Stack里，作为InteractiveViewer的child
          child: Stack(
            children: [
              Image.asset("images/ncdscreen_oralimage.png"),
              const Positioned(
                left: 80.0,
                top: 6.0,
                child: Icon(Icons.radio_button_checked, color: Colors.black),
              ),
              const Positioned(
                left: 110.0,
                top: 24.0,
                child: Icon(Icons.radio_button_checked, color: Colors.black),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明： #

• 把原本和InteractiveViewer同级的Stack移到InteractiveViewer内部，作为它的child
• 图片和两个图标现在属于同一个Stack，这样InteractiveViewer的缩放、滚动变换会作用于整个Stack，图标就能始终保持在图片的固定相对位置上
• 优化了代码的常量声明和类命名（比如将MyStatelessWidget改为符合规范的_ZoomState）

这样修改后，无论怎么缩放或滚动图片，图标都会和图片保持相对位置，不会出现偏移。

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