Flutter: MediaQuery

• Flutter Widget of the Week

使用MediaQuery根据不同的屏幕大小调整应用程序的UI布局。 您还可以使用它根据用户布局首选项进行UI调整。

class _MyHomeState extends State<MyHome> {

  @override
  Widget build(BuildContext context) {

    MediaQueryData deviceData = MediaQuery.of(context);

    // 屏幕信息
    Size screenSize = deviceData.size;

    // 设备方向
    Orientation deviceOrientation = deviceData.orientation;
    bool isPortrait = true;
    if (deviceOrientation == Orientation.portrait) {
      // print('竖屏：更高');
      isPortrait = true;
    } else if (deviceOrientation == Orientation.landscape) {
      // print('横屏: 更宽');
      isPortrait = false;
    }

    // 默认字体大小
    double fontScaling = deviceData.textScaleFactor;

    // 屏幕各个部分，flutter自动提供了一个安全区域
    EdgeInsets notchInset = deviceData.padding;
    print(notchInset);

    // 辅助信息，是否禁用了动画
    bool noAnimations = deviceData.disableAnimations;
    print(noAnimations);
    
    // 系统UI的大小
    print(MediaQuery.of(context).viewPadding.bottom);

    // 当前App亮度模式
    Brightness screenContrast = deviceData.platformBrightness;
    print(screenContrast);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            child: Text(
              screenSize.width.toString(),
              style: TextStyle(fontSize: 30),
            ),
          ),
          Container(
            child: Text('默认字体大小： $fontScaling'),
          ),
          Container(
            height: 100.0,
            decoration: BoxDecoration(
              color: isPortrait ? Colors.green : Colors.purple,
            ),
          ),
        ],
      ),
    );
  }
}