直接上代码

  1. class ScreenUtil {
  2.   static ScreenUtil instance = new ScreenUtil();
  3.   double width;
  4.   bool allowFontScaling;
  5.   static double _screenWidth;
  6.   static double _textScaleFactor;
  7.   ScreenUtil({
  8.     this.width = 750, // 默认设计稿750px
  9.     this.allowFontScaling = false, // 默认不跟随系统缩放字体
  10.   });
  11.   static ScreenUtil getInstance() {
  12.     return instance;
  13.   }
  14.   void init(BuildContext context) {
  15.     _screenWidth = MediaQuery.of(context).size.width;
  16.     _textScaleFactor = MediaQuery.of(context).textScaleFactor;
  17.   }
  18.   get scaleWidth => _screenWidth / instance.width;
  19.   setSize(double size) => size * scaleWidth;
  21.   ///@param fontSize 传入设计稿上字体的px ,
  22.   setSp(double fontSize) => allowFontScaling
  23.       ? setSize(fontSize)
  24.       : setSize(fontSize) / _textScaleFactor;
  25. }
  27. // 使用, 在入口文件中(一般为app.dart),
  28. ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
  29. // 在切图是使用
  30. Text('关于',
  31.     ...
  32.     style: TextStyle(color: kLingyiText500, fontSize: ScreenUtil.getInstance().setSp(32))
  33. )
  34. Container(
  35.     width: ScreenUtil.getInstance().setSize(64),
  36.     height: ScreenUtil.getInstance().setSize(64),
  37.     ...
  38. )

附flutter开发注意事项

  • 凡是不能确地页面高度的都使用可滑动组件(ListView, SingleChildScroll…)
  • 使用materail主题都要考虑appbar返回键在Android和Ios的统一, 建议全部使用leading自定义返回图标, 并且注意返回图标与背景色区分开来
  • 使用TextField注意屏幕被撑起问题, 键盘类型, 是否自动更正等
  • 明确设计主题色, 并分离出单独的配置文件
  • 图片占位符问题, 确保图片请求时图片区域视觉友好