前言
普通的基础组件自然不能满足我们的日常开发需求，所以小T带大家了解Flutter开发中的常用组件
本篇将介绍常用的组件。分为上中下三篇在这里插入图片描述
结构图：
本小结内容：
1.SizedBox
- SizedBox.expand
- SizedBox.shrink
- SizedBox.fromSize
2.Expanded
这两个组件都是在屏幕适配时常用或者必用的，因为啥呢，它省事啊！
1.SizedBox
这是一个特定大小的盒子。这个widget给予子控件宽度和高度。如果宽度或高度为null，则此widget将调整自身大小以匹配子控件的大小。
让我们来看看他的源码：
SizedBox({
Key? key,
this.width,
this.height,
Widget? child
})确实是很简单，但是丝毫不影响它的强大功能呢~
SizedBox尺寸调节：
- SizedBox没有宽高约束，子控件有宽高约束，那么SizedBox会调节自己匹配子控件大小。
- SizedBox有宽高约束，SizedBox子控件没有宽高约束，SizedBox父控件无约束，那么SizedBox会将自己的约束条件给予SizedBox子控件。
- SizedBox父控件有约束，那么约束会传递给SizedBox。
举个小栗子：
SizedBox(
child: Container(
width: 20,
height: 20,
child: Text("普通的填充"),
),
),
Container(
margin: EdgeInsets.only(top: 10),
child: SizedBox(
width: 20,
height: 20,
child: Text("包含填充"),
),
),
Container(
width: 20,
height: 20,
margin: EdgeInsets.only(top: 10),
child: SizedBox(
child:Text("没啥用哈哈"),
),
),SizedBox.expand属性
尽可能大的在父控件的约束内显示
Container(
margin: EdgeInsets.only(top: 20),
color: Colors.red,
width: 50,
height: 50,
child: SizedBox.expand(
child: Text("尽可能大的在父控件的约束内显示"),
),
),SizedBox.shrink属性
尽可能小的在父控件的约束内显示
Container(
margin: EdgeInsets.only(top: 20),
color: Colors.red,
width: 50,
height: 50,
child: SizedBox.expand(
child: Text("尽可能小的在父控件的约束内显示"),
),
),SizedBox.fromSize
以Size尺寸约束
Container(
margin: EdgeInsets.only(top: 10),
child: SizedBox.fromSize(
size: Size(20,20),
child: Text("以Size尺寸约束"),
),
),这里解释一下Size:
- Size(width, height)：指定宽高
- Size.copy(size) ：从另一个Size复制尺寸
- Size.square(dimension)：正方形，dimension：边长
- Size.fromWidth(width)：指定宽度
- Size.fromHeight(height)：指定高度
- Size.fromRadius(radius)：指定半径，结果一样是正方形，Size.fromRadius(radius) = Size.square(2* radius)
这是一个用于标明组件尺寸的，开发中不常用，大家听听图一乐~
2.Expanded
Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使用。
让我们来看看源码：
Expanded(
{Key key,
int flex: 1,
@required Widget child}
)它除了child之外，有一个flex属性比较常用。flex表示弹性系数，默认是1。
它最最最常用在Row和Column中
举个栗子：
当Row中的组件不使用Expanded的时候
Scaffold(
body: Column(
children: [
SizedBox(
height: 20,
),
Container(
color: Colors.red,
child: Row(children: <Widget>[
Image.asset(
"images/myself.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
Image.asset(
"images/myself.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
Image.asset(
"images/myself.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
)
]))
],
),
);
使用Expanded时：
Scaffold(
body: Column(
children: [
SizedBox(
height: 20,
),
Container(
color: Colors.red,
child: Row(children: <Widget>[
Expanded( //使用ta去包裹组件
child: Image.asset(
"images/myself.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
Image.asset(
"images/myself.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
),
Image.asset(
"images/myself.jpg",
width: 100,
height: 100,
fit: BoxFit.cover,
)
]))
],
),
);
这些组件就是这么简单~
至此我们的Flutter的基本组件和常用组件在这里就结束了。
我们将会开启对于网络请求，路由管理，屏幕适配，性能优化等进阶~，希望大家持续关注阿T。
欢迎留言纠正 ~ 不妨给个点赞哈哈
