Flutter widgets（二）

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),
  ],