容器類組件
- Padding 留邊距
- Container 容器-內(nèi)外邊距汁政，寬高
- 裝飾器Decoration 容器樣式修改 BoxDecoration记劈，ShapeDecoration，UnderlineTabIndicator等
- 約束Constraints 容器大小限制 ConstrainedBox目木，SizedBox，AspectRatio等
- 裁切類容器：ClipOval军拟，ClipRRect柄冲，ClipRect
- Scaffold 頁面骨架
Padding 內(nèi)邊距
Padding(
child: Text("AAAAAAAA"),
padding: EdgeInsets.fromLTRB(10,100, 30, 80),//依次為左现横，上，右戒祠，下設(shè)置邊距
),
還可以使用以下方式快速添加邊距姜盈，適應(yīng)不同場(chǎng)景的需求
padding: EdgeInsets.all(10),//4個(gè)邊都留10邊距
padding: EdgeInsets.only(left: 10,bottom: 20),//可選參數(shù)，指定哪條邊留邊距
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 20),//可選參數(shù)示血，上下邊距10救拉，左右邊距20
Container 容器-內(nèi)外邊距，寬高
Container(
width: 300,//容器寬
height: 200,//容器高
padding: EdgeInsets.all(20),//內(nèi)邊距
margin: EdgeInsets.all(20),//外邊距
// color: Colors.red,//背景色告喊，和decoration屬性互斥派昧，只能設(shè)置一個(gè)，否則會(huì)報(bào)錯(cuò)
//裝飾器
// decoration: ShapeDecoration(color: Colors.red, shape: CircleBorder()),
decoration: BoxDecoration(
color: Colors.blue,//背景顏色
borderRadius: BorderRadius.circular(20), //圓角
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black26, //陰影的顏色
blurRadius: 10, //虛化的寬度
spreadRadius: 10, //陰影和原物大小的差值--不包括虛化的部分
offset: Offset(40, 40), //陰影的偏移量
),
],
),
//容器約束-大小限制
constraints: BoxConstraints(
minHeight: 100,
minWidth: 100,
maxWidth: 200,//這里限制了200秆吵，所以上面設(shè)置的寬度300無效
maxHeight: 150,
),
child: Text("AAAAAAAA"),
),
widget_container.png
裝飾器Decoration
上面Conatiner中用到了一個(gè)BoxDecoration纳寂，用于裝飾Container容器的樣式，圓角烈疚，背景色爷肝，陰影等陆错，其實(shí)Container內(nèi)部使用的是DecoratedBox，只是進(jìn)行了一次封裝对嚼，方便使用绳慎。Flutter除了提供BoxDecoration，還有ShapeDecoration靡砌，UnderlineTabIndicator珊楼，F(xiàn)lutterLogoDecoration，他們都是Decoration的子類厕宗。
約束Constraints
約束容器的大小已慢，上面代碼中的Container限制了最大最小的寬高，內(nèi)部實(shí)現(xiàn)也是進(jìn)行了一次封裝蛇受，使用的是ConstrainedBox，另外Flutter還提供了SliverConstraints兢仰，在滾動(dòng)布局中進(jìn)行約束
如果不使用Container把将，直接使用DecoratedBox和ConstrainedBox也是可以的，自己去實(shí)現(xiàn)child察蹲，如下使用：
DecoratedBox(
decoration: BoxDecoration(
//背景顏色
color: Colors.blue, //圓角
borderRadius: BorderRadius.circular(20),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black26, //陰影的顏色
blurRadius: 10, //虛化的寬度
spreadRadius: 10, //陰影和原物大小的差值--不包括虛化的部分
offset: Offset(40, 40), //陰影的偏移量
),
],
),
child: Text("AAAAAAAA"),
),
ConstrainedBox(
constraints: BoxConstraints(
minHeight: 100,
minWidth: 100,
maxWidth: 200, //這里限制了200，所以上面設(shè)置的寬度300無效
maxHeight: 150,
),
child: Container(
color: Colors.red,
width: 100,
child: Center(child: Text("AAAAAAA")),
),
),
尺寸限制容器：ConstrainedBox漫拭，SizedBox混稽，AspectRatio等
ConstrainedBox：大小約束
SizedBox：指定大小的容器
UnconstrainedBox：解除父容器大小限制
AspectRatio：指定比例
他們都是SingleChildRenderObjectWidget的子類，都只有一個(gè)child widget礼旅。
Container(
margin: EdgeInsets.only(top: 10),
child: SizedBox(
width: 100,
height: 100,
child: Container(
color: Colors.red,
width: 50,//這里設(shè)置無效
height: 200,//這里設(shè)置無效
child: Center(child: Text("AAAAAAA")),
),
),
),
widget_sizebox.png
Container(
margin: EdgeInsets.only(top: 20),
width: 100, //指定寬為100
child: AspectRatio(
aspectRatio: 0.5, //父容器寬為100痘系，寬高比為0.5饿自，則高度為200
child: Container(
color: Colors.red,
child: Text(
"11111111111111111111111111111111111111111111111111111111111111111111111111111"
"11111111111111111111111111111111111111111111111111111111111111111111111111"
"11111111111111111111111111111111111111111111111111111111111111111111111111"),
),
),
),
widget_aspectratio.png
裁切類容器：ClipOval璃俗，ClipRRect，ClipRect
圓形頭像城豁，圓角矩形唱星，矩形裁切
ClipOval(
child: Image.network(
IMAGE_0,
fit: BoxFit.cover,
width: 50,
height: 50,
),
),
ClipRect(
child: Container(
color: Colors.black12,
child: Image.network(
IMAGE_0,
fit: BoxFit.cover,
width: 100,
height: 100,
),
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(30),
),
child: Container(
color: Colors.black12,
child: Image.network(
IMAGE_0,
fit: BoxFit.cover,
width: 200,
height: 200,
),
),
),
)
widget_clip.png
Scaffold 骨架容器
完整的骨架容器包含了
頂部導(dǎo)航欄：appBar
內(nèi)容體：body
左側(cè)和右側(cè)的抽屜：drawer间聊、endDrawer
底部菜單導(dǎo)航：bottomNavigationBar
懸浮按鈕:floatingActionButton
widget_scaffold.png
Scaffold(
//頂部導(dǎo)航
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () => {
//點(diǎn)擊左上角的按鈕
Scaffold.of(context).openDrawer()
},
);
},
),
title: Text("Scaffold的使用"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.folder_shared),
onPressed: () => {},
),
IconButton(
icon: Icon(Icons.share),
onPressed: () => {},
),
],
bottom: TabBar(
controller: _tabController,
tabs: tabs.map((e) => Tab(text: e)).toList(),
),
),
//內(nèi)容體
body: TabBarView(
controller: _tabController,
children: <Widget>[
Center(child: Text(tabs[0])),
Center(child: Text(tabs[1])),
Center(child: Text(tabs[2])),
],
),
//左邊抽屜
drawer: Container(
width: 250,
color: Colors.white,
child: Center(
child: FlatButton(
child: Text("左側(cè)抽屜"),
onPressed: () => {},
),
),
),
//右邊抽屜
endDrawer: Drawer(
child: MediaQuery.removePadding(
context: context, // removeTop: true,//移除抽屜菜單頂部默認(rèn)留白
child: ListView(
children: <Widget>[
ListTile(leading: const Icon(Icons.add), title: const Text('Add account0')),
ListTile(leading: const Icon(Icons.add), title: const Text('Add account1')),
ListTile(leading: const Icon(Icons.add), title: const Text('Add account2')),
ListTile(leading: const Icon(Icons.add), title: const Text('Add account3')),
],
),
),
),
//底部菜單導(dǎo)航
bottomNavigationBar: BottomNavigationBar(
currentIndex: index,
onTap: (i) => {
setState(() {
index = i;
})
},
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.map), title: Text(tabs[0])),
BottomNavigationBarItem(icon: Icon(Icons.map), title: Text(tabs[1])),
BottomNavigationBarItem(icon: Icon(Icons.map), title: Text(tabs[2])),
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => {},
),
);
