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

清疚 2021-06-30 09:48 971阅读 0赞

#### 一开始实现的效果图： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
图片总是铺不满，以为是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,
            ));
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/8a02561e6fe540d3a9c3e75a3c18c2f0.png