【Flutter 问题系列第 17 篇】Flutter 如何设置图片充满全屏

这是【Flutter 问题系列第 17 篇】，如果觉得有用的话，欢迎关注专栏。

我平常用到的一共有三种方式，个人经常使用第一种，详情以及最终效果图请继续往下看。

方式一

通过 ConstrainedBox 的 constraints 属性设置图片充满全屏

ConstrainedBox(
  constraints: BoxConstraints.expand(), // 自适应屏幕
  child: Image.asset(
    "assets/images/girl.jpeg",
     fit: BoxFit.cover,
  ),
)

方式二

通过设置 Container 的 width 和 height 为屏幕的宽高，让图片充满全屏

Container(
  width: MediaQuery.of(context).size.width, // 屏幕宽度
  height: MediaQuery.of(context).size.height, // 屏幕高度
  child: Image.asset(
    "assets/images/girl.jpeg",
     fit: BoxFit.cover,
  ),
)

方式三

如果你用了层级组件 Stack ，你也可以这样设置

Stack(
  children: [
    Positioned.fill(
      child: Image.asset(
        "assets/images/girl.jpeg",
         fit: BoxFit.cover,
      ),
    ),
  ],
)

三种方式的效果图如下所示

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年4月24日 GitHub 标星已达 90K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。