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

最新推荐文章于 2024-04-29 16:28:49 发布

原创最新推荐文章于 2024-04-29 16:28:49 发布 · 8.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Container #Image.assert #图片背景 #图片铺满

Flutter开发专栏收录该内容

93 篇文章

订阅专栏

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

效果图如下：

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

一开始实现的效果图：

在这里插入图片描述
图片总是铺不满，以为是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),
        ),
        Container(
          margin: EdgeInsets.only(left: 15, top: 20, bottom: 20),
          child: Row(
            children: <Widget>[
              Container(
                width: 60,
                height: 60,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(4),
                  child: FadeInImage.assetNetwork(
                    placeholder:
                        "https://csdnimg.cn/pubfooter/images/edu-QR.png",
                    image: "https://csdnimg.cn/pubfooter/images/edu-QR.png",
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "名企校招交流",
                      style: TextStyle(fontSize: 16, color: Colors.white),
                    ),
                    Row(
                      children: <Widget>[
                        Icon(
                          Icons.comment,
                          color: Colors.white,
                        ),
                        Text(
                          "45667",
                          style: TextStyle(color: Colors.white, fontSize: 12),
                        ),
                        Icon(
                          Icons.remove_red_eye,
                          color: Colors.white,
                        ),
                        Text(
                          "3.5w",
                          style: TextStyle(color: Colors.white, fontSize: 12),
                        ),
                      ],
                    ),
                    Text(
                      "名企校招交流，不是名企也欢迎！",
                      style: TextStyle(color: Color(0xFFFFFFFF)),
                    ),
                  ],
                ),
                margin: EdgeInsets.only(left: 15),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildHeadMember() {
    return Container(
        height: 70,
        child: Row(
          children: <Widget>[
            Padding(padding: EdgeInsets.only(left: 24,top: 16,bottom: 16,right: 24),child: ClipOval(
              child: Image.asset(Util.getImgPath("xz")),
            ),),
            Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text("一杯好喝的咖啡",style: TextStyle(color: Color(0xFF353535),fontSize: 14),),
                  Text("组长",style: TextStyle(color: Color(0xFFA0A0A0),fontSize: 12),),
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("1.4w浏览",style: TextStyle(color: Color(0xFF353535),fontSize: 14),),
                Icon(Icons.settings),
                Icon(Icons.settings),
                Icon(Icons.settings),
              ],
            ),
          ],
        ),
        decoration: BoxDecoration(
          color: Colors.white,
        ));
  }