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(),
           )