使用flutter_screenutil时,测试设备的designSize该选哪种尺寸?
关于flutter_screenutil中designSize的选择建议
- 核心原则:designSize必须和你的UI设计稿基准尺寸完全匹配,它是适配的参考基准,所有响应式换算都是基于这个尺寸和实际设备尺寸的比例来计算的。
- 针对你给出的两个尺寸:
- CSS视口尺寸385*854:这个是设备的逻辑像素尺寸,和Flutter中
MediaQuery.of(context).size返回的单位一致。如果你的设计稿是基于逻辑像素标注的(比如设计师给的文本大小、控件尺寸都是以逻辑像素为单位),选这个最稳妥,适配出来的效果会和设计预期更贴合。 - 屏幕尺寸720*1600:这个是设备的物理像素尺寸,等于逻辑像素乘以设备像素比(devicePixelRatio)。如果你的设计稿是直接基于物理像素做的(这种情况比较少见,现在大多设计稿用逻辑像素),才需要选这个。
- CSS视口尺寸385*854:这个是设备的逻辑像素尺寸,和Flutter中
- 快速验证方法:
可以先临时设置其中一个尺寸测试,比如:
然后用ScreenUtilInit( designSize: const Size(385, 854), child: MyApp(), )ScreenUtil().setSp(16)设置一段文本,对比设计稿的预期大小,看是否匹配;如果不对,再换成720*1600测试。
内容的提问来源于stack exchange,提问作者ron
相关产品推荐
相关产品推荐

