Flutter Contaner设置图片为背景，解决图片不能铺满的情况

最新推荐文章于 2024-01-15 16:01:49 发布

xudailong_blog

最新推荐文章于 2024-01-15 16:01:49 发布

阅读量8.5k

点赞数 1

分类专栏： Flutter开发文章标签： Flutter Container Image.assert 图片背景图片铺满

本文链接：https://blog.csdn.net/xudailong_blog/article/details/95773456

版权

本文介绍了在Flutter中使用Container设置图片为背景时遇到的无法铺满屏幕的问题。通过在Image.asset中添加特定代码，成功实现了背景图片全屏显示。详细代码和解决方案可供参考。

摘要由CSDN通过智能技术生成

效果图如下：

在这里插入图片描述
左右两边的黑色请忽略，绿色的图片是一张背景图，

一开始实现的效果图：

在这里插入图片描述
图片总是铺不满，以为是stack嵌套的问题，又以为是container的其他问题，即使Image.asse中设置了fit: BoxFit.cover，一直不满屏，

解决

主要是在images中添加了下面两行代码：

width: double.infinity,
height: double.infinity

试了很多其他方法都不信，这个才是答案，

整个代码：

  Widget _buildRoot() {
   
    return Container(
      child: Column(
        children: <Widget>[
          _buildHeadGroup(),
          _buildHeadMember(),
          SizedBox(height: 10,),
        ],
      ),
    );
  }

  Widget _buildHeadGroup() {
   
    return Stack(
      children: <Widget>[
        Container(
          color: Colors.orange,
          height: 100,
          child: Image.asset(Util.getImgPath("small_room_detail_head_bg"),
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity),
        ),