flutter学习 - ui 相关

106 阅读1分钟

通常在将375*765设计稿转成html代码的时候,我们会借助一些插件(比如:postCssPxToRem)来帮我们实现 设计稿对于各个手机的适配。

按照这个思路,在写flutter的时候我们同样也需要这样一个转换,以达到一套设计稿可以适配不同尺寸屏幕的问题。

这里分析两种思路:
1、自己写一个方法转换

  1. 思路大致是获取当前设备的的宽高 (mediaQuery.size.width)
    
  2. 设置一个设计稿的宽,获得一个比率,之后页面写宽度的时候通过提供出去的px方法转换比例  
    

temp.png 2、flutter_screenutil pub地址:pub.flutter-io.cn/packages/fl…

提供了比较齐全的使用方法,截图来自pub,这里比较全面甚至包括了据顶部和底部的安全距离

image.png