效果图如下:

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

一开始实现的效果图:

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

更多资源请访问:

超详细图文搭建个人免费博客

关注「蛇崽网盘教程资源」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。

在微信后台回复「130个小程序」,即可免费领取享有导入就能跑的微信小程序

在这里插入图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐