Flutter小技巧总结之Flutter设置Container背景图片

 

• 问题场景一？
  设置背景颜色的话我们可以在containerd的decoration中设置color即可，但接添加属性，如果设置背景图片呢？（备注：decoration和color不能同时出现）
  
  • 解决方法
    

    new Container(
          // 控件高度
         constraints: new BoxConstraints.expand(
            height:120.0,
          ),
          //设置背景图片
         decoration: new BoxDecoration(
                color: Colors.grey,
               border: new Border.all(width: 2.0, color: Colors.red),
         borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                image: new DecorationImage(
                   image: new AssetImage(widget.bgUrl),  
                    //这里是从assets静态文件中获取的，也可以new NetworkImage(）从网络上获取
             centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
                ),
            ),
            alignment: Alignment.center,
            child: column()
        );
      }

• 问题场景二？
  设置了image后，仍会遇到一个问题。背景图片显示的大小是本身尺寸的大小，无法填充整个container背景
  • 解决办法
    使用fit: BoxFit.cover属性进行填充处理。
    

    new Container(
          // 控件高度
         constraints: new BoxConstraints.expand(
            height:120.0,
          ),
          //设置背景图片
         decoration: new BoxDecoration(
                color: Colors.grey,
               border: new Border.all(width: 2.0, color: Colors.red),
         borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
                image: new DecorationImage(
                   image: new AssetImage(widget.bgUrl),  
                     fit: BoxFit.cover,
                    //这里是从assets静态文件中获取的，也可以new NetworkImage(）从网络上获取
             centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
                ),
            ),
            alignment: Alignment.center,
            child: Column(),
           )