Flutter实现BoxShape边框内图标移动并适配多屏幕尺寸问题

问题原因 #

• 当前代码使用固定像素值定义AnimatedPositioned的top、left属性，不同设备的屏幕尺寸、像素密度存在差异，硬编码的数值只能匹配iPhone 13 Pro的屏幕参数，换设备自然会出现偏移。
• 没有做边界限制逻辑，图标移动时没有和外层圆形边框的边界做绑定，很容易超出边框范围。

解决方案 #

修改思路为所有尺寸、位置都使用相对比例计算，同时加上图标移动的边界校验，修改后的代码如下：

import 'package:flutter/material.dart';

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

  @override
  State<ProtectIconDemo> createState() => _ProtectIconDemoState();
}

class _ProtectIconDemoState extends State<ProtectIconDemo> {
  // 图标尺寸根据实际资源调整，这里示例为40
  static const double iconSize = 40;
  // 圆形边框的宽度
  static const double borderWidth = 2;

  @override
  Widget build(BuildContext context) {
    // 获取当前屏幕尺寸
    final screenSize = MediaQuery.of(context).size;
    // 圆形大小按屏幕宽度的80%计算，可自行调整比例
    final circleSize = screenSize.width * 0.8;
    // 圆形距离屏幕顶部的偏移，让圆形整体居中显示
    final circleTopOffset = (screenSize.height - circleSize) / 2;
    // 圆形的左右边界
    final circleLeft = (screenSize.width - circleSize) / 2;
    final circleRight = circleLeft + circleSize;
    // 圆形的上下边界（减去边框宽度，保证在边框线内）
    final circleTop = circleTopOffset + borderWidth;
    final circleBottom = circleTopOffset + circleSize - borderWidth;

    // 示例图标初始位置：圆形顶部居中，你可以根据需求修改移动逻辑
    final iconTop = circleTop - iconSize / 2;
    final iconLeft = (screenSize.width - iconSize) / 2;

    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          color: Color(0xff182341),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 外层圆形边框
            Container(
              width: circleSize,
              height: circleSize,
              decoration: BoxDecoration(
                border: Border.all(color: const Color(0xff5F687E), width: borderWidth),
                shape: BoxShape.circle,
              ),
            ),
            Stack(
              children: [
                AnimatedPositioned(
                  // 移动时做边界限制，保证不超出边框
                  top: iconTop.clamp(circleTop, circleBottom - iconSize),
                  left: iconLeft.clamp(circleLeft + borderWidth, circleRight - iconSize - borderWidth),
                  duration: const Duration(milliseconds: 500),
                  child: SizedBox(
                    width: iconSize,
                    height: iconSize,
                    child: const Image(image: AssetImage('images/g8.png')),
                  ),
                ),
              ]
            ),
          ]
        ),
      ),
    );
  }
}

核心修改点说明 #

• 所有尺寸均通过MediaQuery获取屏幕尺寸后按比例计算，没有硬编码固定像素，适配所有屏幕尺寸
• 提前计算出圆形边框的上下左右边界，图标移动时通过clamp()方法做边界限制，确保图标始终在边框线范围内
• 外层Stack加了alignment: Alignment.center保证圆形默认居中，无需额外写偏移值

内容的提问来源于stack exchange，提问作者N.Armada