Flutter中设置Positioned组件top值后图片不显示问题求助

原因分析 #

当你给Positioned组件设置top属性时，Stack会将该子组件视为手动定位元素，此时如果没有指定水平方向的约束（比如left、right或者width），包裹图片的Container宽度会被压缩为0，图片自然无法显示。

而不设置top时，Positioned会默认让子组件占满Stack的可用空间，Container有足够的宽度来渲染图片，所以能正常显示。

解决方法 #

你可以通过以下几种方式修复这个问题：

方法1：给Positioned添加left和right约束 #

让Positioned水平方向占满Stack的宽度：

Positioned(
  top: 1,
  left: 0,
  right: 0,
  child: Container(
    height: MediaQuery.of(context).size.height * 1 - 17,
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage('home/h_intro-s1-l1.jpg'),
        fit: BoxFit.fill,
      ),
    ),
  ),
)

方法2：给Container指定宽度 #

直接给Container设置和屏幕一致的宽度：

Positioned(
  top: 1,
  child: Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height * 1 - 17,
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage('home/h_intro-s1-l1.jpg'),
        fit: BoxFit.fill,
      ),
    ),
  ),
)

方法3：使用Positioned.fill #

Positioned.fill会让子组件默认占满整个Stack，你可以通过top属性设置偏移量：

Positioned.fill(
  top: 1,
  child: Container(
    height: MediaQuery.of(context).size.height * 1 - 17,
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage('home/h_intro-s1-l1.jpg'),
        fit: BoxFit.fill,
      ),
    ),
  ),
)

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