Flutter widgets(二)
BackdropFilter
一个将筛选器应用于现有的绘制内容,然后绘制child 的widget
与ImageFilter结合,
Stack(
children: [
Image.asset("images/bg.jpg"),
//指定范围
Positioned(
top: 50,
bottom: 60,
left: 20,
right: 30,
child: BackdropFilter(
//模糊
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
//为0表示全透明
color: Colors.black.withOpacity(0.5),
),
),
),
],
),
SizedBox
SizedBox 是一个具有特定大小的widget,它让其child也具有该大小,它只会在其父级允许的范围内进行扩展
可以在没有child的情况下使用SizeBox,它不会显示,仍会占用空间,非常适合在widget之间添加间隙
SizedBox(
width: 80,
height: 80,
child: RaisedButton(
child: Text(
"Button",
style: TextStyle(color: Colors.red),
),
onPressed: () {},
),
)
MediaQuery
获取设备的大小信息和用户偏好设置的信息,设备方向和是否修改了默认字体大小
Widget build(BuildContext context) {
//屏幕尺寸
var screen = MediaQuery.of(context).size;
//屏幕方向
var deviceOrientation = MediaQuery.of(context).orientation;
//字体大小
var fontScaling = MediaQuery.of(context).textScaleFactor;
//系统UI遮挡的部分
var padding = MediaQuery.of(context).padding;
//限制动画
var disableAnim = MediaQuery.of(context).disableAnimations;
//屏幕对比度级别
var brightness = MediaQuery.of(context).platformBrightness;
print(screen);
print(deviceOrientation);
print(fontScaling);
print(padding);
print(disableAnim);
print(brightness);
return ...
}
输出
I/flutter (25394): Size(411.4, 683.4)
I/flutter (25394): Orientation.portrait
I/flutter (25394): 1.0
I/flutter (25394): EdgeInsets(0.0, 24.0, 0.0, 0.0)
I/flutter (25394): false
I/flutter (25394): Brightness.dark
Spacer
自定义空间,添加在widgets之间
Row(
children: [
Container(width: 60, height: 60, color: Colors.teal),
Spacer(),
Container(width: 60, height: 60, color: Colors.red),
Spacer(
flex: 3,
),
Container(width: 60, height: 60, color: Colors.yellow),
Spacer(
flex: 9,
),
Container(width: 60, height: 60, color: Colors.blue),
],