使用MediaQuery和比例因子

优点:使用简单,可以处理大多数情况下的屏幕适配需求。

缺点:需要手动计算比例因子,并且随着UI元素变得更加复杂和层次化(例如多层次列表或动画效果),使用此方法可能会变得更加困难。

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 使用 MediaQuery.of(context) 获取 MediaQueryData 对象
final mediaQueryData = MediaQuery.of(context); // 获取屏幕大小
final screenSize = mediaQueryData.size; // 获取设备像素比
final devicePixelRatio = mediaQueryData.devicePixelRatio; // 获取 SafeArea 内边距 ; SafeArea 是一个指定在屏幕上可见内容的区域
final padding = mediaQueryData.padding; // 获取当前可见区域的内边距
final viewInsets = mediaQueryData.viewInsets; // 获取屏幕方向
final orientation = mediaQueryData.orientation; // 获取平台亮度模式
final brightness = mediaQueryData.platformBrightness; return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MediaQuery Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Screen Size: $screenSize'),
Text('Device Pixel Ratio: $devicePixelRatio'),
Text('SafeArea Padding: $padding'),
Text('View Insets: $viewInsets'),
Text('Orientation: $orientation'),
Text('Brightness: $brightness'),
],
),
),
),
);
}
} void main() {
runApp(MyApp());
}

flutter_screenutil

优点:使用简单,支持屏幕宽度适配和按照设备像素密度适配,并提供了多种适配方式,可以应对多种屏幕尺寸和设备像素密度的情况。

缺点:在高级UI布局和元素调整方面可能存在一些限制,并可能会影响代码的可维护性。

flutter_screenutil 插件的 ScreenUtilInit 对 MaterialApp 进行了包装,以便于在应用程序启动时对屏幕适配进行初始化。然而,由于这个包装可能会与某些特定应用场景的组件结合使用,导致一些额外的问题。一般来说,flutter_screenutil 可能会给您带来以下一些问题:

  1. 在一些特定应用场景下可能会失效:例如,在 BottomNavigationBar 或者 TabBar 中,因为这些组件自带屏幕适配,使用 flutter_screenutil 可能会导致无法正常适配。

  2. 需要注意不同尺寸之间的兼容性:使用 flutter_screenutil 后,您需要确保您的应用程序可以在不同的尺寸上正常工作,否则可能会导致布局问题。

  3. 可能会对性能造成一定的影响:由于 flutter_screenutil 需要在运行时进行适配计算,可能会对应用程序的性能造成一定的影响。

  4. debugShowCheckedModeBanner :false;失效
import 'package:flutter_screenutil/flutter_screenutil.dart';  //使用的页面都要添加

void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false, // 在这添加可以解决debugShowCheckedModeBanner失效问题
home: ScreenUtilInit(
designSize: const Size(1920, 1080), //第一个参数是宽度,第二个参数是高度
builder: (context, widget) => MyApp(), ),
),
);
} // 屏幕宽度(单位 dp)
double screenWidth = ScreenUtil().screenWidth; // 屏幕高度
double screenHeight = ScreenUtil().screenHeight; // 根据屏幕宽度动态计算出的实际宽度
double width = ScreenUtil().setWidth(200); // 根据屏幕高度动态计算出的实际高度
double height = ScreenUtil().setHeight(200); // 根据屏幕宽度和高度动态计算出的实际字体大小
double fontSize = ScreenUtil().setSp(18);

LayoutBuilder 来获取一个内的盒子的宽度和高度

class MyBoxWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
double width = constraints.maxWidth;
double height = constraints.maxHeight; return Container(
color: Colors.blue,
width: width,
height: height,
child: Text(
'Width: $width, Height: $height',
style: TextStyle(color: Colors.white),
),
);
},
);
}
}

MediaQuery获取

 final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;

...

flutter屏幕适配方案的更多相关文章

  1. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

  2. flutter屏幕适配

    现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设 ...

  3. Flutter实战视频-移动电商-11.首页_屏幕适配方案讲解

    11.首页_屏幕适配方案讲解 国人写的屏幕适配插件: https://github.com/OpenFlutter/flutter_screenutil 最新版本是0.5.1 在pubspec.yam ...

  4. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  5. Flutter移动电商实战 --(11)首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  6. 11-Flutter移动电商实战-首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  7. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  8. Unity2D多分辨率屏幕适配方案(转载)

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  9. Cocos2d-JS的屏幕适配方案

    Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...

  10. cocos2dx屏幕适配方案

    我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...

随机推荐

  1. 文心一言 VS 讯飞星火 VS chatgpt (118)-- 算法导论10.3 3题

    三.用go语言,在ALLOCATE-OBJECT和 FREE-OBJECT过程的实现中,为什么不需要设置或重置对象的 prev 属性呢? 文心一言: 在 Go 语言中,ALLOCATE-OBJECT ...

  2. Net 高级调试之四:Windbg 动态调试

    一.简介 今天是<Net 高级调试>的第四篇文章.到今天为止,也有三篇文章了,对 Windbg 也有初步的认识了,当然,一个工具流畅.熟练的使用,对于我们调试 Net 程序是至关重要的.在 ...

  3. Unity学习笔记--基础

    基础 3D数学 Mathf函数库 print(Mathf.PI); print(Mathf.Abs(-10)); print(Mathf.CeilToInt(1.2f));//向上取整 print(M ...

  4. synchronized 解决方案

    4.2 synchronized 解决方案 为了避免临界区的竞态条件发生,有多种手段可以达到目的. 阻塞式的解决方案:synchronized,Lock 非阻塞式的解决方案:原子变量 本次课使用阻塞式 ...

  5. RTMP协议学习——从握手到播放

    从客户端发起播放请求,到rtrmp视频流开始播放,大致经过了握手->建立连接->创建流->播放这几步比较重要的步骤.下面我将结合wireshark的抓包,对其中的每个流程进行分析和学 ...

  6. vue 甘特图(附件):甘特图附件

    甘特图样式: .gantt_container { border-color: transparent !important; .gantt_right { top: 0% !important; d ...

  7. C#操作Microsoft.Office.Interop.Word类库完整例子

    使用Microsoft.Office.Interop.Word类库操作wor文档 一.准备工作 首先在工厂中,引用[Microsoft.Office.Interop.Word],本地安装了world, ...

  8. Vue公共loading升级版(处理并发异步差时响应)

    公共loading是项目系统中很常见的场景,处理方式也不外乎三个步骤: 1.通过全局状态管理定义状态值(vuex.pinia等). 2.在程序主入口监听状态值变化,从而展示/隐藏laoding动画. ...

  9. UIPath变量和参数

    一. UIPath变量   变量(Variables),变量是所有编程语言中必不可少的部分.对于UIPath来说自然也是如此,其承载了我们RPA流程中数据传递的重要作用.对于接触过编程的开发者来说,变 ...

  10. Linux删除‘-’开头的文件

    版权声明:原创作品,谢绝转载!否则将追究法律责任. ----- 作者:kirin 先看两个特殊文件(以--开头) [root@kirin ~]# ll total 0 -rw-r--r-- 1 roo ...