zoukankan      html  css  js  c++  java
  • Flutter: MediaQuery

    使用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,
                ),
              ),
            ],
          ),
        );
      }
    }
    
  • 相关阅读:
    使用Google浏览器做真机页面调试
    JavaScript从作用域到闭包
    用canvas实现一个colorpicker
    你还在为移动端选择器picker插件而捉急吗?
    我是这样写文字轮播的
    高性能JS-DOM
    ExtJs4学习(四):Extjs 中id与itemId的差别
    MongoDB 安装与启动
    UML应用:业务内涵的分析抽象&amp;表达
    MySQL 错误日志(Error Log)
  • 原文地址:https://www.cnblogs.com/ajanuw/p/10922463.html
Copyright © 2011-2022 走看看