33 | 如何适配不同分辨率的手机屏幕？
陈航
该思维导图由 AI 生成，仅供参考
你好，我是陈航。
在上一篇文章中，我与你分享了在 Flutter 中实现国际化的基本原理。与原生 Android 和 iOS 只需为国际化资源提供不同的目录，就可以在运行时自动根据语言和地区进行适配不同，Flutter 的国际化是完全在代码中实现的。
即通过代码声明的方式，将应用中所有需要翻译的文案都声明为 LocalizationsDelegate 的属性，然后针对不同的语言和地区进行手动翻译适配，最后在初始化应用程序时，将这个代理设置为国际化的翻译回调。而为了简化这个过程，也为了将国际化资源与代码实现分离，我们通常会使用 arb 文件存储不同语言地区的映射关系，并通过 Flutter i18n 插件来实现代码的自动生成。
可以说，国际化为全世界的用户提供了统一而标准的体验。那么，为不同尺寸、不同旋转方向的手机提供统一而标准的体验，就是屏幕适配需要解决的问题了。
在移动应用的世界中，页面是由控件组成的。如果我们支持的设备只有普通手机，可以确保同一个页面、同一个控件，在不同的手机屏幕上的显示效果是基本一致的。但，随着平板电脑和类平板电脑等超大屏手机越来越普及，很多原本只在普通手机上运行的应用也逐渐跑在了平板上。
但，由于平板电脑的屏幕非常大，展示适配普通手机的界面和控件时，可能会出现 UI 异常的情况。比如，对于新闻类手机应用来说，通常会有新闻列表和新闻详情两个页面，如果我们把这两个页面原封不动地搬到平板电脑上，就会出现控件被拉伸、文字过小过密、图片清晰度不够、屏幕空间被浪费的异常体验。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Flutter中实现多窗格布局以适配不同分辨率的手机屏幕是一项重要的技术挑战。本文通过讨论国际化实现原理和屏幕适配问题，为读者提供了详细指导和实践方法。作者强调了通过代码声明的方式实现国际化资源与代码分离，并介绍了使用arb文件和Flutter i18n插件简化国际化资源管理。针对不同尺寸和旋转方向的手机屏幕，作者提出了多个布局方案，包括使用OrientationBuilder控件感知屏幕旋转并加载不同的布局方式，以及通过MediaQueryData提供的orientation方法来根据设备的旋转方向设置组件的初始化行为。此外，文章还介绍了如何通过SystemChrome提供的setPreferredOrientations方法固定视图的布局方向。通过实际代码演示和技术原理解释，读者可以了解如何在Flutter应用中实现多窗格布局以适配不同分辨率的手机屏幕。文章还提到了在应用开发中需要兼容碎片化可能带来的潜在问题，以确保良好的用户体验。整体而言，本文为读者提供了解决Flutter屏幕适配问题的全面指南。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Flutter 核心技术与实战》，新⼈⾸单¥59
《Flutter 核心技术与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(12)
- 最新
- 精选
- Miracle_只讲横竖屏切配吗，感觉最重要的是不同尺寸手机的同一组件设置宽高，如何根据ui图给的尺寸实现高度一致性啊。
作者回复: 其实这块内容我觉得反而比较简单：以iPhone 6切图为基准，算出当前设备的缩放系数，在布局的时候乘一下就行了
2019-09-1211 
只是个昵称不知道在Flutter如何实现类似于今日头条在Android上的屏幕适配规则？ 就是将设计图的宽度设置为基准宽度，控件的大小直接写设计图上的大小，然后通过框架自动计算屏幕实际宽度进行等比缩放？作者回复: 你看你自己就已经把解决方案都给出了
2019-12-1222- httvcios，Android 一般适配用几套尺寸图才够。
作者回复: 要求没那么精细的话，一般一套就可以了：2.0x（xhdpi）
2019-09-1221 
Ethan平时写的Container(width;20) 这个20类似android中的dp吗？作者回复: 对
2019-12-03- Geek_keyiA页面设置固定竖屏，B页面采用statefulwiget在initState的时候设置横竖屏，dispose的时候设置成竖屏
作者回复: 大体思路对
2019-09-26 
汪帅我想问一下怎么显示Window啊？好像现在都是用的activity作者回复: 给Window添个FlutterView就可以了
2019-09-122- 石学谦关于不同尺寸设备的适配，目前大多使用flutter_screenutil包，算是比较成熟的方案了2022-05-10
浪迹江湖double baseUiWidthDp = 375; double widthDp = window.physicalSize.width / window.devicePixelRatio; // relative size double rsize(double size) { return (size / baseUiWidthDp) * widthDp; }2022-02-21- SkleiUi给的设计图是以iPhone6为原型，看到您回复说直接算基准，能具体说下怎么做吗？比如我有一个容器，ui图是宽120px，高是36px，那我flutter中要怎么写？2021-01-28
- 努力学习能重点讲下android的屏幕适配吗? ios很简单,可是android很多机型适配起来很奇怪,不是在布局的时候乘一下就行了.2021-01-26
收起评论