Flutter 屏幕适配组件
一、Expanded
Expaned常用于Row, Column, Flex的子元素中；在使用Expanded子Widget的时候，能够填充满剩余空间。
const Expanded({
Key key,
int flex = 1,
@required Widget child,
})
flex代表着当前Expanded的宽度（高度）占比系数；
child代表着当前Expanded拥有的子Widget。
代码：
Container(
height: 200,
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
children: [
// 第一个区块
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.amber.withOpacity(0.5)),
),
),
// 间隔
SizedBox(width: 10.0, height: 10.0),
// 第二个区块
Expanded(
child: Column(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.grey.withOpacity(0.5),
),
),
),
SizedBox(width: 10.0, height: 10.0),
Expanded(
child: Row(
children:[
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
color: Colors.red.withOpacity(0.5),
),
),
),
SizedBox(width: 10.0, height: 10.0),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
color: Colors.blueAccent.withOpacity(0.5)),
),
),
],
),
)
],
),
),
],
),
)
效果：
image.png
二、Flexible
Flexible也是为小部件提供空间的，但是不会要求子空间填满可用空间；
const Flexible({
Key? key,
this.flex = 1,
this.fit = FlexFit.loose,
required Widget child,
}) : super(key: key, child: child);
Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平方向，Column在垂直方向)，但是它与Expaned组件不同，它不强制子组件填充可用空间。
Flexible组件必须是Row、Column、Flex等组件的后裔，并且从Flexible到它封装的Row、Column、Flex的路径必须只包括StatelessWidgets或StatefulWidgets组件(不能是其他类型的组件，像RenderObjectWidgets)。
代码：
return Scaffold(
appBar: AppBar(
title: Text("Flexible"),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
fit:FlexFit.tight,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.amber.withOpacity(0.5),
),
),
),
Flexible(
fit:FlexFit.loose,
flex: 2,
child: Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.yellow.withOpacity(0.5),
),
),
),
Flexible(
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.cyan.withOpacity(0.5),
),
),
),
Flexible(
fit:FlexFit.loose,
child: Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.red.withOpacity(0.5),
),
),
),
],
),
);
效果：
image.png
如果在使用Flexible时，设置fit为FlexFit.tight，Flexible和Expanded就一模一样了.
因此Expanded和Flexible的区别就是FlexFit.tight和FlexFit.loose的区别：
- tight：必须（强制）填满剩余空间。
- loose：尽可能大的填满剩余空间，但是可以不填满。
三、Spacer
Spacer只是一个间距控件，可以用于调节小部件之间的间距，它有一个flex可以进行设置；
const Spacer({Key? key, this.flex = 1})
: assert(flex != null),
assert(flex > 0),
super(key: key);
代码：
return Scaffold(
appBar: AppBar(
title: Text("Spacer"),
),
body: Center(
child: Column(
children: [
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.amber.withOpacity(0.5),
),
),
Spacer(flex: 1),
Container(
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
color: Colors.blueAccent.withOpacity(0.5),
),
),
],
),
),
);
效果：
image.png
三、AspectRatio
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
const AspectRatio({
Key? key,
required this.aspectRatio,
Widget? child,
}) : assert(aspectRatio != null),
assert(aspectRatio > 0.0),
super(key: key, child: child);
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。
AspectRatio作用于父控件，根据aspectRatio计算父控件的宽或者高，AspectRatio的子控件将填充满父控件，子控件的宽高无效。
强制子部件的宽度和高度具有给定的宽高比,可以父容器给定一个宽或者高，来换算另一个值
代码：
return Scaffold(
appBar: AppBar(
title: Text("AspectRatio"),
),
body: Center(
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.red,
),
)),
);
效果：
image.png
四、Wrap
Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列现实不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。
Wrap({
Key? key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.clipBehavior = Clip.none,
List<Widget> children = const <Widget>[],
}) : assert(clipBehavior != null), super(key: key, children: children);
this.direction：设置水平局部还是垂直布局，
this.alignment：设置元素的其实位置，
this.spacing：在direction: Axis.horizontal的时候指左右两个Widget的间距,在direction: Axis.vertical的时候指上下两个widget的间距，
this.runAlignment：设置widget与widget在水平或者垂直轴上的间距，
1、WrapAlignment.start//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget从顶部开始展示
2、 WrapAlignment.end//每一行（列）子Widget在纵（横）轴上的排列，全部子Widget挨着底部展示
3、 WrapAlignment.center//每一行（列）子Widget在纵（横）轴上的排列，全部子widget在中间展示
4、WrapAlignment.spaceBetween//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget挨着边展示
5、 WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离的一半
6、WrapAlignment.spaceAround//每一行（列）子Widget在纵（横）轴上的排列，两两子widget之间间距相等，最上最下子widget离边的距离为两两子widget之间距离相等
this.runSpacing：在direction: Axis.horizontal的时候指上下两个Widget的间距,在direction: Axis.vertical的时候指左右两个widget的间距，
this.crossAxisAlignment ：
1、WrapCrossAlignment.start：水平排列时控制全部子widgets的上部对齐，垂直排列时控制全部子widgets的 左边对齐，
2、WrapCrossAlignment.end：水平排列时控制全部子widgets的下部对齐，垂直排列时控制全部子widgets的又边对齐，
3、WrapCrossAlignment.center//设置每一行的子Widgets剧中对齐，
this.textDirection：设置每一行（列）的展示 ，
1、textDirection: TextDirection.ltr：设置每一行（列）的子Widgets从左到右（从上到下）正常显示，正序排列，
2、textDirection: TextDirection.rtl：设置每一行（列）的子Widgets倒序显示，
this.verticalDirection：
1、VerticalDirection.down,//设置行列widgets的展示，正常显示，
2、VerticalDirection.up//倒序展示，比如，在direction: Axis.horizontal时有1、2、3行widgets，设置为up后，展示为3、2、1
this.clipBehavior：内容裁剪选择，这里默认为hardEdge， 有none，hardEdge，antiAlias，antiAliasWithSaveLayer四种裁剪行为，hardEdge为允许裁剪但不抗锯齿，这个属性默认就好在实际wrap使用中，当内容超过了wrap所能展示的范围，及时设置为none也是会被裁剪的
代码：
class WrapPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Warp"),
),
body: Container(
child: Wrap(
runAlignment: WrapAlignment.spaceBetween,
alignment: WrapAlignment.start,
runSpacing: 1,
children: tags.map((e) => TagItem(e)).toList())),
);
}
}
class TagItem extends StatelessWidget {
final String text;
final a = Random();
TagItem(this.text);
@override
Widget build(BuildContext context) {
return Container(
height: 40,
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
decoration: BoxDecoration(
color: Colors.cyan,
border: Border.all(color: Colors.blueAccent.withAlpha(60), width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Container(
margin: EdgeInsets.all(8),
child: Text(text),
),
);
}
}
const List<String> tags = [
"12",
"3",
" 111111",
"阿佛拍拍拍拍拍",
"sdzxc",
"zxc阿弹尽粮绝",
"hhhh",
"全球",
"qe434",
"2俄企鹅企鹅",
"'c;vkz;'';zxcl';'",
"这种",
"asd9083049",
"11233"
];
效果：
image.png
