構造方法
<code>Container({ Key key,//當前widget標識 this.alignment,//子控件在容器內的對齊方式 this.padding,//內邊距 Color color, //容器的背景顏色 Decoration decoration,//置背景圖片、圓角、漸變、陰影、邊框等背景裝飾器 this.foregroundDecoration, double width,//控件寬 double height,//控件高 BoxConstraints constraints,//組件的寬高限制 this.margin,//外邊距 this.transform,// Matrix4矩陣變換 this.child,//子控件})/<code> alignment
子控件在容器內的對齊方式,其類型分別是繼承AlignmentGeometry的Alignment和AlignmentDirectional.
Alignment
- 上: Alignment.topLeft(頂部左對齊)、Alignment.topCenter(居中)、Alignment.topRight(右對齊)
- 中: Alignment.centerLeft(中部左對齊)、Alignment.center(居中) Alignment.centerRight(右對齊)
- 下: Alignment.bottomLeft(底部左對齊)、Alignment.bottomCenter(居中)、Alignment.bottomRight(右對齊)
AlignmentDirectional;對齊方式與文本的TextDirection的屬性有關
- 上: AlignmentDirectional.topStart(頂部左對齊)、AlignmentDirectional.topCenter(居中)、 AlignmentDirectional.topEnd(右對齊)
- 中:AlignmentDirectional.centerStart(中部左對齊)、AlignmentDirectional.center(居中) AlignmentDirectional.centerEnd(右對齊)
- 下:AlignmentDirectional.bottomStart(底部左對齊)、AlignmentDirectional.bottomCenter(居中)、 AlignmentDirectional.bottomEnd(右對齊)
Alignment與AlignmentDirectional代碼示例
<code>Container( margin: const EdgeInsets.only(top: 10), color: Colors.orange[100], alignment: Alignment.bottomRight, height: 100, child: Text('Alignment.bottomRight'),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, height: 100.0, alignment: AlignmentDirectional.bottomEnd, child: Text( "AlignmentDirectional.bottomEnd=>TextDirection.ltr", textDirection: TextDirection.ltr, ),),Container( margin: const EdgeInsets.only(top: 10), color: Colors.orange[100], height: 100.0, alignment: AlignmentDirectional.bottomEnd, child: Text( "AlignmentDirectional.bottomEnd=>TextDirection.rtl", textDirection: TextDirection.rtl, ),),/<code>- result
padding
內邊距;左,上,右,下;
margin
外邊距,其屬性也是用padding 實現的.
- padding與margin代碼示例
<code>Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, padding: EdgeInsets.only( left: 10.0, right: 50.0, top: 10.0, bottom: 30), child: Container( color: Colors.orange[100], child: Text("this.padding"), ),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, padding: EdgeInsets.only( left: 10.0, right: 50.0, top: 10.0, bottom: 30), child: Container( color: Colors.orange[100], child: Text("this.margin"), ),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, child: Container( margin: const EdgeInsets.only( left: 10.0, right: 50.0, top: 10, bottom: 30), color: Colors.orange[100], child: Text("this.margin"), ),),/<code>- result
Height & Width
從上面margin與padding的示例中就可以看出,相同的代碼,顯示“this.padding”的控件要長一點,而由於設置小字體後,第三個的控件是最小的,由此推斷當Container 沒有設置寬高時,會依據子控件的大小與padding屬性調整自身的大小,而且是儘可能的小。通常有三種類型盒約束：
- 儘可能大。例如 Center,ListView,PageView渲染盒
- 跟隨子widget大小。例如, Transform 和 Opacity 的渲染盒
- 指定尺寸。例如, Image 和 Text的渲染盒
Container， 會根據構造函數參數的不同而不同。Container默認是儘可能大的佔用空間， 但是如果你給它指定一個width，那它就會採用指定的值
尺寸大小
- 如果Container沒有子部件，沒有寬高，沒有約束，並且父部件提供了無限制約束(unbounded constraints)，Container會盡可能小。
- 如果Container沒有子部件，沒有對齊規則，但是提供了高度、寬度或者約束，那麼Container會在遵循寬、高、約束和父部件約束的情況下，儘可能小。
- 如果Container沒有子部件，沒有寬高，沒有約束，沒有對齊，但是父部件提供了有限制約束，那麼Container會擴張以適應（fit）父部件約束
- 如果Container有一個對齊規則，並且父部件提供了無限制約束，那麼Container會嘗試調整自己來包圍子部件
- 如果Container有一個對齊規則，而且父部件提供了有限制約束，那麼Container會嘗試擴張以適應（fit）父部件，然後根據對齊方式，將子部件置於其內
- 另外，Container有子部件，但是Container沒有寬高、約束、對齊規則，那麼Container會傳遞父部件的約束到其子部件，然後調整自身來匹配子部件。
- margin和padding也會影響佈局，decoration會隱性增加padding(比如設置border)。
- 默認是儘可能大
constrains
約束控件的最大最小寬高
BoxConstraints.tight
其方法定義:
<code>BoxConstraints.tight(Size size) : minWidth = size.width, maxWidth = size.width, minHeight = size.height, maxHeight = size.height;/<code>
可以看到BoxConstraints.tight約束控件的寬高是固定的了min=max。
BoxConstraints.loose
其方法定義:
<code>BoxConstraints.loose(Size size) : minWidth = 0.0, maxWidth = size.width, minHeight = 0.0, maxHeight = size.height;/<code>
BoxConstraints.loose最大寬高是指定值，最小是0。
BoxConstraints.expand
其方法定義:
<code>const BoxConstraints.expand({ double width, double height, }) : minWidth = width != null ? width : double.infinity, maxWidth = width != null ? width : double.infinity, minHeight = height != null ? height : double.infinity, maxHeight = height != null ? height : double.infinity;/<code>未指定寬高時,控件會盡可能大。
- Width,Height & constrains 代碼
<code>Container( margin: const EdgeInsets.only(top: 10), width: 200.0, height: 100.0, color: Colors.orange[100], child: Text('width = 200,height = 100'),),Container( margin: const EdgeInsets.only(top: 10), color: Theme.of(context).primaryColor, constraints: BoxConstraints.expand(height: 50.0), child: Text('BoxConstraints constraints'),),/<code>- result
Color
容器的背景顏色,這個屬性與decoration中的color屬性衝突.
Decoration
其類型為Decoration,為一個抽象類,其主要屬性有下:
- color
- image
- border
- gradient;漸變
- LinearGradient;線性漸變,設置起始位置和漸變色集合
- RadialGradient;放射漸變,以中心為原點向外發散漸變,可以設置發散的半徑
- SweepGradient;扇形漸變,以水平x軸正向方向為起點,掃描到指定的角度;可以設置起始角度,結束角度,中心點
Decoration 相關代碼
<code>Container( margin: const EdgeInsets.only(top: 10), constraints: BoxConstraints.expand(height: 100.0), padding: EdgeInsets.all(10.0), decoration: ShapeDecoration( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10)), color: Colors.orange[100], shadows: [ BoxShadow( color: Colors.red, offset: Offset(0.1, 0.5), blurRadius: 2.0), ]), child: Text('ShapeDecoration'), ),Container( margin: const EdgeInsets.only(top: 10), constraints: BoxConstraints.expand(height: 200), alignment: Alignment.center, padding: const EdgeInsets.all(10), decoration: BoxDecoration( gradient: LinearGradient( colors: [ Theme.of(context).primaryColor, Colors.orange[100] ]), shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.red, offset: Offset(0.1, 0.5), blurRadius: 2.0), ]), child: Text( "BoxDecoration", style: TextStyle(color: Colors.white), ), ),/<code>- result
transform
<code> Container( margin: const EdgeInsets.only(top: 10), padding: const EdgeInsets.only(top: 10.0, left: 10.0), constraints: BoxConstraints.expand(height: 100, width: 100), color: Colors.orange[100], child: Text('This.transform'), ),Container( margin: const EdgeInsets.only(top: 10), padding: EdgeInsets.only(top: 10, left: 10), constraints: BoxConstraints.expand(width: 100, height: 100), color: Colors.orange[100], transform: Matrix4.rotationY(3.14 / 4)..rotateX(3.14 / 4), child: Text('this.transform'), ),/<code>- result
分享到:
閱讀更多 Flutter學習記 的文章
關鍵字: 構造方法 EdgeInsets 控件
