Flutter中如何固定背景图的尺寸和位置，适配不同手机屏幕？

问题根因 #

你当前使用固定像素值设置按钮的内边距和宽高，不同手机屏幕的尺寸、宽高比存在差异，背景图设置BoxFit.fill后会被拉伸适配屏幕，固定像素的位置和尺寸就无法和拉伸后的背景图保持对应关系，自然会出现偏移。

可行解决方案 #

推荐使用比例适配方案，所有位置、尺寸参数都基于当前屏幕的实际宽高按比例计算，和背景图的拉伸比例保持一致即可：

• 首先获取当前屏幕的宽高，或者通过LayoutBuilder获取Stack父容器的实际可用尺寸
• 以设计稿的尺寸为基准，将固定像素值转换为百分比系数，动态计算实际的位置、按钮宽高
• 也可以直接使用Positioned组件的leftFactor、topFactor参数，直接按比例设置相对位置

修正后的代码示例 #

Widget build(BuildContext context){
    // 获取屏幕宽高
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    // 假设你的设计稿宽高是375*812，按你实际设计稿调整参数即可
    const designWidth = 375;
    const designHeight = 812;
    // 按比例换算实际运行时的位置、尺寸值
    final buttonTop = screenHeight * 100 / designHeight;
    final buttonLeft = screenWidth * 100 / designWidth;
    final buttonSize = screenWidth * 60 / designWidth;
    final fontSize = screenWidth * 30 / designWidth;

    var height2 = AppBar().preferredSize.height;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        fit: StackFit.expand, // 让Stack填充父容器，保证背景图铺满显示区域
        children: <Widget>[
          Image(
              image: AssetImage("assets/oral_structure.png"),
              fit: BoxFit.fill
          ),
          Positioned(
            top: buttonTop,
            left: buttonLeft,
            child: Container(
                height: buttonSize,
                width: buttonSize,
                child: TextButton( // 原FlatButton已在新版Flutter中废弃，推荐用TextButton替代
                  child: Text('ㅂ', style: TextStyle(fontSize: fontSize,fontWeight: FontWeight.bold)),
                  onPressed: (){
                    Navigator.push(context, MaterialPageRoute(builder: (context) => B()),);
                  },
                )
            ),
          ),
        ],
      ),
    );
}

其他可选优化方案 #

• 如果你的背景图需要保持原宽高比不被拉伸，可以把BoxFit.fill换成BoxFit.contain，同时先计算背景图实际渲染的尺寸，再基于这个尺寸计算按钮位置，适配精度会更高
• 针对支持横竖屏切换的场景，可以添加横竖屏判断逻辑，分别使用不同的比例系数适配

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