flutter Container的decoration

__white發表於2021-08-11
FlutterAI

這是我參與8月更文挑戰的第11天，活動詳情檢視：8月更文挑戰

decoration： 背景裝飾

decoration可以設定邊框、背景色、背景圖片、圓角等屬性，非常實用。對於transform這個屬性，一般有過其他平臺開發經驗的，都大致瞭解，這種變換，一般不是變換的實際位置，而是變換的繪製效果，也就是說它的點選以及尺寸、間距等都是按照未變換前的。 但需要注意的是 deoration和 color： 背景顏色 不能共存，二者同時只能有一個

Decoration共有以下幾種：

  • BoxDecoration:實現邊框、圓角、陰影、形狀、漸變、背景影像
  • ShapeDecoration: 顏色，陰影，圖片
  • FlutterLogoDecoration: Logo圖片
  • UnderlineTabindicator:下劃線

BoxDecoration

const BoxDecoration({
	this.color,//背景色
	this.image,//圖片
	this.border,//邊框
	this.borderRadius,//圓角的大小
	this.boxShadow,//陰影
	this.gradient,//漸變色
	this.backgroundBlendMode,//影像的混合模式
	this.shape = BoxShape.rectangle,//形狀,BoxShape.circle和borderRadius不能同時使用
})
複製程式碼

boxShadow 陰影

  • color - 陰影顏色
  • offset - 陰影相偏移量
  • blurRadius - 高斯模糊數值
  • gradient - 漸變，支援2種漸變：LinearGradient線性漸變 和 RadialGradient掃描漸變

LinearGradient

  • begin - 漸變開始的位置
  • end - 漸變結束的位置
  • colors - 漸變顏色,陣列
  • stops - 值列表，範圍[0,1]
  • tileMode - 平鋪模式
  • shape形狀

效果

example:

new Container(
  constraints: new BoxConstraints.expand(
    height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
    image: new DecorationImage(
      image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  padding: const EdgeInsets.all(8.0),
  alignment: Alignment.center,
  child: new Text('Hello World',
    style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
  transform: new Matrix4.rotationZ(0.3),
)

 
複製程式碼

tips： color：用來設定container背景色，如果foregroundDecoration設定的話，可能會遮蓋color效果。 decoration：繪製在child後面的裝飾，設定了decoration的話，就不能設定color屬性，否則會報錯，此時應該在decoration中進行顏色的設定。 foregroundDecoration：繪製在child前面的裝飾。

相關參考 ：blog.csdn.net/u011068702/…

相關文章