生活中離不開杯子、碗、盆等容器
喝水需要杯子,裝飯裝肉用的碗,洗臉洗腳用的盆.
杯子、碗、洗臉盆都有自己的顏色、寬度、高度;這一切屬性根據我們的需求到商店進行了購買.
在Flutter開發中接觸到的Container(容器),它也有相關的屬性供我們使用.
Container可以根據屬性的設定來展現不同的布局大小和樣式,還可以容納其他Widget.
Container只所以可以是容器,因為它可以容納其它的widget.
常用屬性 width、height、color、alignment、padding
........
固定寬高
Center(
child: Container(width: 100.0,height: 100.0,color: Colors.blue,),
),
Center(
child: Container(width: 200.0,height: 100.0,color: Colors.red,),
)寬度和高度無窮大
Center(
child: Container(
width: double.infinity,
height: double.infinity,
//color: Colors.red,
decoration: BoxDecoration(color: Colors.blue,),
),
)寬高>=-0.0 (寬高為正數和-0.0)
Center(
child: Container(
width: -100.0,
height: -100.0,
//color: Colors.red,
decoration: BoxDecoration(color: Colors.blue,),
),
),運行例外
Container寬高約束條件
子widget對其方式
常見的對齊方式
topLeft、topCenter、topRight、centerLeft、center、centerRight、bottomLeft、bottomCenter、bottomRight.
對齊方式是以容器的中心點為基準
Alignment center = Alignment(0.0, 0.0)
Container(
width: 200.0,
height: 200.0,
color: Colors.red,
alignment: Alignment.center,
child: Text("xmiaoshen"),
),
)對齊方式以容器的最左邊頂部為基準
Alignment topLeft = Alignment(-1.0, -1.0)
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
)自定義對齊方式
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment(0.5,0.5),
child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
),內邊距
內邊距 (padding): Container 內部widget分別到四邊距離.
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.only(top: 10.0,left: 10.0),
alignment: Alignment.topLeft,
child: Text("xmiaoshen",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18.0),),
)子widget寬高超過或者等于父容器時,內邊距屬性padding依然有效
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.all(18.0),
alignment: Alignment.topLeft,
child: Container(width: 200.0,height: 200.0,color: Colors.black45,),
)Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
padding: EdgeInsets.all(18.0),
alignment: Alignment.topLeft,
child: Container(width: 300.0,height: 300.0,color: Colors.black45,),
)外邊距
外邊距 (margin): Container 分別到父容器Container四邊距離.
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.black45,
margin: EdgeInsets.all(20.0),
),
)container寬高超過或者等于父容器時,外邊距屬性margin依然有效
Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
alignment: Alignment.topLeft,
child: Container(
width: 300.0,
height: 300.0,
color: Colors.black45,
margin: EdgeInsets.all(20.0),
),
)添加約束
容器約束
當我們設定容器的 width 必須在 minWith 和 maxWith 之間.
當我們設定容器的 height 必須在 minHeight 和 maxHeight 之間.
美化Container
通過設定 Container 的屬性
decoration (裝飾、裝飾品)
Box (盒子)
設定邊框
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
),
)邊框變圓角
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
)
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
bottomRight: Radius.circular(20.0))
),
)矩形變圓形
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.purple,width: 6.0),
shape: BoxShape.circle
),
)設定陰影
offset 陰影開始坐標(相對于手機螢屏原點偏移量) ,blurRadius 陰影模糊半徑 ,spreadRadius 陰影擴散半徑.
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(-6.0, 6.0),
blurRadius: 6.0,spreadRadius: 3.0)
],
shape: BoxShape.rectangle),
)
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
boxShadow: [
BoxShadow(
color: Colors.purple,
offset: Offset(-6.0, 6.0),
blurRadius: 6.0,spreadRadius: 3.0)
],
shape: BoxShape.circle),
)漸變背景
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
gradient: LinearGradient(colors: [
Colors.blue.withOpacity(1.0),
Colors.blue.withOpacity(0.9),
Colors.blue.withOpacity(0.8),
Colors.blue.withOpacity(0.7),
Colors.blue.withOpacity(0.6),
Colors.blue.withOpacity(0.5),
Colors.blue.withOpacity(0.4),
Colors.blue.withOpacity(0.3),
Colors.blue.withOpacity(0.2),
Colors.blue.withOpacity(0.1),
], begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
)小太陽
Container(
width: 200.0,
height: 200.0,
//color: Colors.black45,
decoration: BoxDecoration(
color: Colors.blue,
gradient: RadialGradient(
center: const Alignment(0.0, 0.0), // near the top right
radius: 0.2,
colors: [
const Color(0xFFFFFF00), // yellow sun
const Color(0xFF0099FF), // blue sky
],
stops: [0.3, 1.0],
)),
)參考
虛線容器插件
matrix4_transform
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/125811.html
標籤：其他