「这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战」
背景
昨天我们简单介绍了一下styled_widget的功能,今天我们来详细的看看有该框架有哪些Widget,另外是如何实现的 ,Widget列表传送门
widget介绍
expanded
功能: 填满剩余空间
默认参数:
int flex = 1:控制占比
该控件对Expanded简单封装,不多说了,看实现好了
Widget expanded({
Key? key,
int flex = 1,
}) =>
Expanded(
key: key,
child: this,
flex: flex,
)
flexible
功能: 控制子控件占比
默认参数:
int flex = 1:控制占比
FlexFit fit = FlexFit.loose: tight:必须(强制)填满剩余空间。loose:尽可能大的填满剩余空间,但是可以不填满。
该控件对Flexible简单封装,不多说了,看实现好了
Widget flexible({
Key? key,
int flex = 1,
FlexFit fit = FlexFit.loose,
}) =>
Flexible(
key: key,
child: this,
flex: flex,
fit: fit,
)
positioned
功能: 绝对布局
选填参数:
double? left, double? top, double? right, double? bottom, double? width, double? height,
默认参数:
bool animate = false: 为true时使用动画扩展
该widget也是拥有动画效果,对Positioned进行封装实现
Positioned(
key: key,
child: this,
left: left,
top: top,
right: right,
bottom: bottom,
width: width,
height: height,
)
positionedDirectional
功能: 绝对布局,跟上面的positioned差不多,只不过left right变成了start end
选填参数:
double? start, double? end, double? top, double? bottom, double? width, double? height,
默认参数:
bool animate = false: 为true时使用动画扩展
该widget也是拥有动画效果,对positionedDirectional进行封装实现
PositionedDirectional(
key: key,
child: this,
start: start,
end: end,
top: top,
bottom: bottom,
width: width,
height: height,
)
safeArea
功能: 控制安全区域,例如刘海屏的刘海部分
默认参数:
bool top = true, bool bottom = true, bool left = true, bool right = true,
对safeArea进行封装实现
SafeArea(
key: key,
top: top,
bottom: bottom,
left: left,
right: right,
child: this,
)
semanticsLabel
功能: 屏幕阅读器,主要是为视觉障碍的人准备的,比较复杂,感兴趣的人可以自行了解一下,semanticsLabel
必填参数:
String label
对Semantics.fromProperties进行封装实现
Widget semanticsLabel(
String label, {
Key? key,
}) =>
Semantics.fromProperties(
key: key,
properties: SemanticsProperties(label: label),
child: this,
)
结语
希望大家把一些好的三方分享出来,打在评论区,共同学习,共同进步
作为Flutter届的一个小学生,希望大家多多指教