06-Flutter 容器类组件
2020-05-23 本文已影响0人
大于于
容器类组件
- Padding 留边距
- Container 容器-内外边距，宽高
- 装饰器Decoration 容器样式修改 BoxDecoration，ShapeDecoration，UnderlineTabIndicator等
- 约束Constraints 容器大小限制 ConstrainedBox，SizedBox，AspectRatio等
- 裁切类容器：ClipOval，ClipRRect，ClipRect
- Scaffold 页面骨架
Padding 内边距
Padding(
child: Text("AAAAAAAA"),
padding: EdgeInsets.fromLTRB(10,100, 30, 80),//依次为左，上，右，下设置边距
),
还可以使用以下方式快速添加边距，适应不同场景的需求
padding: EdgeInsets.all(10),//4个边都留10边距
padding: EdgeInsets.only(left: 10,bottom: 20),//可选参数，指定哪条边留边距
padding: EdgeInsets.symmetric(vertical: 10,horizontal: 20),//可选参数，上下边距10，左右边距20
Container 容器-内外边距，宽高
Container(
width: 300,//容器宽
height: 200,//容器高
padding: EdgeInsets.all(20),//内边距
margin: EdgeInsets.all(20),//外边距
// color: Colors.red,//背景色，和decoration属性互斥，只能设置一个，否则会报错
//装饰器
// 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，所以上面设置的宽度300无效
maxHeight: 150,
),
child: Text("AAAAAAAA"),
),
widget_container.png
装饰器Decoration
上面Conatiner中用到了一个BoxDecoration，用于装饰Container容器的样式，圆角，背景色，阴影等，其实Container内部使用的是DecoratedBox，只是进行了一次封装，方便使用。Flutter除了提供BoxDecoration，还有ShapeDecoration，UnderlineTabIndicator，FlutterLogoDecoration，他们都是Decoration的子类。
约束Constraints
约束容器的大小，上面代码中的Container限制了最大最小的宽高，内部实现也是进行了一次封装，使用的是ConstrainedBox，另外Flutter还提供了SliverConstraints，在滚动布局中进行约束
如果不使用Container，直接使用DecoratedBox和ConstrainedBox也是可以的，自己去实现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，所以上面设置的宽度300无效
maxHeight: 150,
),
child: Container(
color: Colors.red,
width: 100,
child: Center(child: Text("AAAAAAA")),
),
),
尺寸限制容器：ConstrainedBox，SizedBox，AspectRatio等
ConstrainedBox：大小约束
SizedBox：指定大小的容器
UnconstrainedBox：解除父容器大小限制
AspectRatio：指定比例
他们都是SingleChildRenderObjectWidget的子类，都只有一个child widget。
Container(
margin: EdgeInsets.only(top: 10),
child: SizedBox(
width: 100,
height: 100,
child: Container(
color: Colors.red,
width: 50,//这里设置无效
height: 200,//这里设置无效
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 骨架容器
完整的骨架容器包含了
顶部导航栏：appBar
内容体：body
左侧和右侧的抽屉：drawer、endDrawer
底部菜单导航：bottomNavigationBar
悬浮按钮:floatingActionButton
widget_scaffold.png
Scaffold(
//顶部导航
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () => {
//点击左上角的按钮
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(),
),
),
//内容体
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("左侧抽屉"),
onPressed: () => {},
),
),
),
//右边抽屉
endDrawer: Drawer(
child: MediaQuery.removePadding(
context: context, // removeTop: true,//移除抽屉菜单顶部默认留白
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')),
],
),
),
),
//底部菜单导航
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: () => {},
),
);
