カップ、ボウル、洗面器、その他の容器は生活の中で切り離せない
飲料水用のコップ、米と肉用のボウル、顔と足を洗うための洗面器が必要です。
カップ、ボウル、洗面台には独自の色、幅、高さがあり、これらの属性はすべて、必要に応じて店で購入しました。
Flutter開発で接触したコンテナ（コンテナ）にも、使用する関連属性があります。
コンテナは、プロパティの設定に応じてさまざまなレイアウトサイズとスタイルを表示でき、他のウィジェットにも対応できます。
コンテナは、他のウィジェットを保持できるため、コンテナのみにすることができます。
共通の属性、幅、高さ、色、配置、パディング
........
幅と高さを固定
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,),
),
),異常な動作
コンテナの幅と高さの制約
サブウィジェット
一般的な配置
topLeft、topCenter、topRight、centerLeft、center、centerRight、bottomLeft、bottomCenter、bottomRight。
配置はコンテナの中心点に基づいています
配置の中心= 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),),
),内側のマージン
パディング：コンテナ内のウィジェットと4つの側面の間の距離。
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),),
)子ウィジェットの幅と高さが親コンテナ以上の場合、パディングプロパティは引き続き有効です
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,),
)マージン
マージン：コンテナーと親コンテナーコンテナーの4つの側面の間の距離。
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),
),
)コンテナーの幅と高さが親コンテナー以上の場合、マージンプロパティ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),
),
)制約を追加する
コンテナの制約
コンテナーの幅を設定するときは、minWith と maxWithの間でなければなりません 。
コンテナーの高さを設定するときは、minHeightとmaxHeightの間でなければなりません。
美化コンテナ
コンテナのプロパティを設定する
装飾（装飾、装飾）
ボックス
境界線を設定
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],
)),
)参照