Flutter中const修饰组件时如何使用MediaQuery设置图片高度

报错根因 #

const 修饰的组件要求其所有属性均为编译期可确定的常量，而 MediaQuery.of(context).size 是运行时才会从设备上下文读取的动态值，编译阶段无法确定具体数值，因此直接给 const Image 传入运行时计算的 height 参数会触发编译错误。

你之前把Image包在Container里可以正常运行，本质是因为你没有给外层Container加const修饰，所以Container的height参数可以接受运行时计算的值，如果给该Container也加const同样会触发报错。

正确处理方案 #

你完全不需要强行给动态高度的Image组件加const修饰，只要对组件内部固定不变的属性单独加const即可保留性能优化效果，修改后代码如下：

body: Column(
  children: [
    Image(
        height: MediaQuery.of(context).size.height * 0.2,
        width: 250,
        // 固定不变的AssetImage单独加const即可
        image: const AssetImage('assets/logo/logo.jpg')),
    Text(
      'Login',
      style: GoogleFonts.lato(
        textStyle: const TextStyle(color: Colors.blue, letterSpacing: .5),
      ),
    ),
  ],
),

如果确实需要拆分常量部分优化性能，可以把和动态参数无关的子组件单独抽离为常量，比如示例里的Text样式、AssetImage都是可以单独加const的部分，没有必要给包含动态参数的整个父组件加const。

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