Flutter如何实现不受窗口尺寸变化影响的固定大小Container？

问题根因 #

你给Container设置的固定宽高失效，是因为Scaffold的body会给子组件传递撑满全屏的紧约束（tight constraint），你的Stack默认服从该约束，导致内部最外层的红色Container也被强行拉伸到Stack的尺寸，忽略了自身设置的sw/sh参数。

修复方案 #

给最内层的Stack包裹UnconstrainedBox组件，打破父级的紧约束，让Stack可以按子组件的实际尺寸自适应，所有Container的固定宽高就会正常生效。
修改后的核心代码片段如下：

@override
Widget build(BuildContext context) {
  final w = MediaQuery.of(context).size.width;
  final h = MediaQuery.of(context).size.height;
  const sw = 600.0;
  const sh = sw/2;
  const scale = 0.5;
  const offset = Offset(sw/2/scale, sh/2/scale);
  
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Transform.translate(offset: Offset(w/2,h/2),
      child:Transform.scale(scale:scale, 
        child: Transform.translate(offset:  Offset(-offset.dx,-offset.dy),
          // 新增UnconstrainedBox打破父级约束
          child: UnconstrainedBox(
            child: Stack(clipBehavior: Clip.none, children:[
              Transform.translate(offset: Offset.zero, child: Container(width: sw, height: sh,color: Colors.red)), 
              Transform.translate(offset: Offset(10,30), child: Container(width: 400,height: 200,color:Colors.green, 
                child: Stack(clipBehavior: Clip.none, children:[
                  Transform.translate(offset: Offset(70,10), child: 
                    Container(width: 200, height: 100, color:Colors.blue, 
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Text('Pushed:'),
                          Text('$_counter', style: Theme.of(context).textTheme.headline4,),
                        ],
                      ),
                    )
                  )
                ])
              )
            ]),
          ),
        )
      )
    ),
  );
}

替代方案 #

如果要做可交互的层级树结构，更推荐直接使用Flutter自带的InteractiveViewer组件，它原生支持缩放、平移操作，不需要自己组合Transform实现，只需要将层级树作为它的子组件，配置好缩放范围即可，内部子组件的固定宽高也不会被拉伸：

• 可通过minScale/maxScale设置缩放的上下限
• 可通过boundaryMargin设置拖动的边界范围
• 自带缩放阻尼、惯性滑动等交互效果，适配端侧操作习惯

内容的提问来源于stack exchange，提问作者Stéphane de Luca