Container是一個擁有繪制、定位、調整大小的widget。
padding和margin
padding和margin分別設置Container的內邊距和外邊距。可取值包括下面四個：
- EdgeInsets.all(50)：設置所有的padding為同一個值50。
- EdgeInsets.only(left: 50,right: 50)：只設置左邊和右邊。
- EdgeInsets.fromLTRB(50,10,50,10)：分別設置左上右下的值為50、10。
- EdgeInsets.symmetric(vertical: 10,horizontal: 50)：如果上下或者左右的padding值一樣可以指定vertical的值為上下的padding值。horizontal指定左右的padding值。
Scaffold(
appBar: AppBar(title: Text('Container')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"確定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.only(left: 50,right: 50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"確定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.fromLTRB(50, 10, 50, 10),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"確定",
style: TextStyle(color: Colors.red),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
borderRadius: BorderRadius.all(Radius.circular(20))),
child: Text(
"確定",
style: TextStyle(color: Colors.red),
),
),
],
),
)),
width和height
width和height指定寬高，如果不指定則為子widget的寬高。如果想要完全撐滿父容器，可以將width和height設置為double.infinity。
decoration
decoration經常被用來改變一個Container的展示效果。其概念類似與android中的shape。一般實際場景中會使用他的子類BoxDecoration。BoxDecoration提供了對背景色，邊框，圓角，陰影和漸變等功能的定制能力。
image: DecorationImage設置一張圖片作為背景。border: Border設置邊界。borderRadius: BorderRadius設置邊界圓角。當shape是BoxShape.circle設置borderRadius將不起作用shape: BoxShape設置形狀。gradient設置漸變。可選值包括三種類型的漸變LinearGradient、RadialGradient、SweepGradient。
Scaffold(
appBar: AppBar(title: Text('BorderRadius')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.yellow,
//設置圖片
image: DecorationImage(
fit: BoxFit.fitWidth,
image: NetworkImage(
'https://flutter.io/images/catalog-widget-placeholder.png',
),
),
//設置邊界
border: Border.all(color: Colors.deepOrange, width: 3),
//設置陰影
boxShadow: const [
BoxShadow(blurRadius: 10),
],
//設置邊界圓角
borderRadius: BorderRadius.all(Radius.circular(18))),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: RadialGradient(
//漸變
colors: const [
Colors.green,
Colors.deepOrange,
Colors.pinkAccent,
Colors.deepPurple
],
),
//設置邊界圓角
shape: BoxShape.circle,
),
)
],
),
),
),
2.Column和Row
MainAxisAlignment
Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Column(
children: <Widget>[
Text("MainAxisAlignment.start",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.center",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceAround",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceBetween",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.spaceEvenly",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
),
Text("MainAxisAlignment.end",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
Icon(Icons.star,color: Colors.yellow, size: 50),
],
)
],
),
),
crossAxisAlignment
Scaffold(
appBar: AppBar(title: Text('Flutter')),
body: Column(
children: <Widget>[
Text("CrossAxisAlignment.start",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
),
Text("CrossAxisAlignment.center",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
),
Text(" CrossAxisAlignment.end",style:TextStyle(
color: Colors.blueAccent,
fontSize: 18
)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Icon(Icons.star,color: Colors.yellow, size: 30),
Icon(Icons.star,color: Colors.yellow, size: 60),
Icon(Icons.star,color: Colors.yellow, size: 30),
],
)
],
),
),
